路由守卫
程序员文章站
2022-03-21 13:17:24
全局路由守卫// route/index.jsexport default new Router()let router = new Router()// 全局路由守卫router.beforeEach((to, from, next) => {// 进入每一个路由之前都会执行这个回调函数// to 将要访问的路由对象// from 将要离开的路由对象// next 是一个函数,决定着是否能正常访问路由 next() next("/login")})e.....
-
全局路由守卫
// route/index.js export default new Router() let router = new Router() // 全局路由守卫 router.beforeEach((to, from, next) => { // 进入每一个路由之前都会执行这个回调函数 // to 将要访问的路由对象 // from 将要离开的路由对象 // next 是一个函数,决定着是否能正常访问路由 next() next("/login") }) export default router
-
路由内守卫
{ path: "/cart", component: Cart, // 只有进入购物车路由的时候才会执行 beforeEnter(to, from, next) { } }
-
组件内守卫
beforeRouteEnter() {} beforeRouteLeave() {} beforeRouteUpdate() {}
axios (重点)
axios第三方, Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
官网:http://www.axios-js.com/
基本使用
-
get
axios.get("接口名称?id=1&xxx=xxx").then(res=> { // res.data }).catch(err => { }) axios.get("接口名称", { params: { id: 1, xxx:2 } }).then(res=> { // res.data }).catch(err => { })
-
post
axios.post("接口名称", { id: 1 }).then(res => { })
-
全局配置
// main.js import axios from 'axios' Vue.prototype.$http = axios //组件 this.$http.get() this.$http.post()
代理的配置
// config/index.js
proxyTable: {
"/api": {
target: "http://localhost:3000",
changeOrigin: true,
pathRewrite: {
"^/api": "/api"
}
}
}
封装(企业)
// src/http/index.js
/**
* 重写get 和 post
* 因为基础用法的get和post无法携带请求头,也就无法传递token
*/
import axios from 'axios'
import router from '../router/index'
let instance = axios.create({
baseURL: "/api",
timeout: 6000
})
// 请求拦截,所有的http请求都会被拦截下来
instance.interceptors.request.use((config) => {
// config 关于请求的所有信息
console.log(config)
//
config.headers.token = "123456"
return config
})
// 相应拦截
instance.interceptors.response.use((res) => {
console.log(res)
if (res.data.code == "401") {
// 跳到登录页
router.push("/my/login")
}
return res
})
// {id: 1}
function get(url, params) {
return instance.get(url, {
params
})
}
function post(url, params) {
return instance.post(url, params)
}
export default {
get,
post
}
// main.js
import http from './http/index'
Vue.prototype.$http = http
// 组件内
this.$http.get("接口地址", {
id: 1
}).then(res => {
})
this.$http.post("接口地址", {
id: 1
}).then(res => {
})
stylus
less,scss,stylus都是css的预处理器
下载
cnpm i stylus stylus-loader --save
Cnpm i less less-loader --save
使用
<style lang="stylus">
color = red
add()
return
*
padding 0
margin 0
html
body
width 100%
color color
</style>
本文地址:https://blog.csdn.net/qq_44295192/article/details/108588877
推荐阅读
-
如何设置TP-LINK路由器的MTU值
-
开启Linux系统路由转发功能 实现多网段电脑共享上网
-
路由器有线能正常使用 无线上不了网的解决办法
-
无线连接路由器时提示“windows无法连接到选定网络,网络可能不在区域中”的解决方法(
-
VISTA下无线连接路由器时提示“已将此计算机连接到xx(SSID),但该计算机不具备访问I
-
无线连接路由器时提示“无线连接被配置为不连接到访问点网络”的解决方法(图文)
-
无线路由器加密后,无线连接时提示受限制或无连接的解决方法
-
笔记本可以搜索到别人的信号却搜索不到自己的路由器信号的解决方法(图文)
-
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
-
ASP.NET 路由