1. router.beforeEach 路由守卫
我们可以使用这个方法,按需拦截用户访问某些敏感路由,例如:
router.beforeEach((to,from,next)=>{ //路由的全局前置守卫
if(to.path.indexOf('/account')==-1){ //判断用户访问的是不是个人中心
next() //不是个人中心,直接放行
}else{
if(store.state.my.userInfo){ //判断登录状态
next() //如果已经登录,直接放行
}else{
next('/login') //如果没有登录,则跳至登录页
}
}
})
2. router.push 编程式导航
通过编程式导航,我们可以通过事件的方式触发路由跳转
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
3. router.go、router.back、router.forward 路由的进入与返回
router.go 作用等同于window.history.go
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
4. router.addRoute 动态设置路由映射
添加一条新路由规则。如果该路由规则有 name,并且已经存在一个与之相同的名字,则会覆盖它。
axios.get('/login',(result)=>{ //通过异步接口获取对应用户的特有路由配置
let {routerList} = result
routerList.forEach((item) => {
this.$router.addRoute(item) //通过addRoute方法依次将路由配置设置给router对象
})
})