首页 > 其他 > 详细

vue路由

时间:2020-11-17 11:24:08      阅读:27      评论:0      收藏:0      [点我收藏+]

vue使用redired对路由重定向:

{
    path: ‘*‘,
    redirect: {
      name: ‘login‘
    }
}
设置根目录
{
    path: "/",
    name: ‘login‘,
    component: login,
  }
设置地址栏地址正常显示:添加mode: ‘history‘,
设置页面是否登录,登录后正常跳转,未登录跳转至指定页(登录页)
在需要过滤的页面添加mate>auth,不需要过滤页面不用添加。
export default new Router({
  mode: ‘history‘,
  routes: [{
    path: "/",
    name: ‘login‘,
    component: login,
  }, {
    path: ‘/HelloWorld‘,
    name: ‘HelloWorld‘,
    component: HelloWorld,
    meta: {
      auth: true
    }]
})
在main.js中添加router.beforeach守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth)) {
    // 对路由进行验证    
    var  token=sessionStorage.getItem("token");
    if (token) { // 已经登陆       
      next() // 正常跳转到你设置好的页面     
    } else {
      // 未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来;
      next({
        name: ‘login‘,
        query: {
          Rurl: to.fullPath
        }
      })
    }
  } else {
    next()
  }
})
 
可以在登录的时候存入session,在访问页面进行验证。记得设置next(),

vue路由

原文:https://www.cnblogs.com/yeyuqian/p/13992542.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!