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对象 }) })
相关文章
关注千锋学习站小程序
随时随地免费学习课程
扫一扫快速进入
千锋移动端页面
扫码匿名提建议
直达CEO信箱