一、vue路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js 路由使用前需要载入vue-router库
二、路由配置 /router/index
1、普通路由配置
{
path: '/user', //配置的路径
name: 'user', //名称
component: () => import('xxx)
}
2、路由传参
{
path:“/product/:id”,
name:"product",
component:xxx
}
<router-link to="/product/abc">
在页面中获取:$route.params.id
}
3、
404:要配置在最后面 { path:"*"}
4、编程式路由跳转
前进 forward() go(1)
后退 go(-1) back()
切换路由 push("/about")
替换路由 replace("/about")
三、路由信息
路由参数 params
查询 query
地址 path
全地址 fullPath
名称 name
四、路由守卫
1、组件内部
进入前:beforeRouterEnter(to,from,next)
to 要进入的路由
from 从哪个页面进入
next 下一步
next()进入to页面
next(true)进入to页面
next(false)不跳转
next(“/login”)跳转到登录
离开前 :beforeRouterLeave
更新前:beforeRouterUpdate
2、全局
beforeEach((to,from,next)=>{})
afterEach
3、 独享
beforeEnter()
作用:进入离开页面前做出拦截,处理事情(跳转提示,权限检查)
五、路由查询参数
传递
next("/login?redirect=/cart")
获取
var redirect = this.$route.query.redirect||'/user'