vue中配置全局路由

  • 在需要登录验证的路由规则后面添加属性 meta:{requireAuth:true}:
    路由配置文件中代码:
export default new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {path:'/',redirect:'/Home'},//重定向,默认显示主页
    {path: '/Login',component: Login},
    {path: '/Home',component: Home}, 
    {path: '/Register',component: Register},
    {path: '/Newnote/:id',component: Newnote,meta:{requireAuth:true}},
    {path: '/Myblog',component: Myblog,meta:{requireAuth:true}},
    {path: '/Articledetails/:id',component: Articledetails,meta:{requireAuth:true}}  //文章详情路由接收文章id参数
  ],
  linkActiveClass:'ivu-menu-item-active'
})
  • 在main.js中配置全局路由守卫:
//配置全局路由守卫验证路由是否需要登录
router.beforeEach((to, from, next) => {
   if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
       if (JSON.parse(sessionStorage.getItem("islogin"))!=false && JSON.parse(sessionStorage.getItem("islogin"))!=null) { // 判断当前是否登录
        next(); //如果登录了next()就表示允许跳转到要去的路由
       }
       else { //否则就跳转到下面的登录界面
        next({
        path: '/login',
        query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
        })
       }
   }
   else {  //如果该路由不需要登录验证就直接允许跳转
   next();
   }
  });

这样一来,在未登录状态下,设置了登录验证的路由就不能跳转了。
其中:
router.beforeEach((to,from,next)=>{})
回调函数中的参数,
to:进入到哪个路由去,
from:从哪个路由离开,
next:函数,决定是否展示你要看到的路由页面。

你可能感兴趣的:(vue中配置全局路由)