vue中配置全局路由_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'
})
1
2
3
4
5
6
7
8
9
10
11
12
13

• 在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();
   }
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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