码迷,mamicode.com
首页 > 其他好文 > 详细

vue 路由权限

时间:2018-10-23 01:12:36      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:component   def   default   from   world   for   导航   his   ken   

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘
import login from ‘@/components/login‘
import register from ‘@/components/register‘
Vue.use(Router)

const router = new Router({
 mode: ‘history‘,
 routes: [{
   path: ‘/‘,
   name: ‘home‘,
   component: HelloWorld,
   meta: {
    requiresAuth: true
   }
  },
  {
   path: ‘/HelloWorld‘,
   name: ‘HelloWorld‘,
   component: HelloWorld,
  },
  {
   path: ‘/login‘,
   name: ‘login‘,
   component: login,
  },
  {
   path: ‘/register‘,
   name: ‘register‘,
   component: register,
  },
 ]
});

//注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
 //获取store里面的token
 let token = store.state.token;
 //判断要去的路由有没有requiresAuth
 if (to.meta.requiresAuth) {
  if (token) {
   next();
  } else {
   next({
    path: ‘/login‘,
    query: { redirect: to.fullPath } // 将刚刚要去的路由path作为参数,方便登录成功后直接跳转到该路由
   });
  }
 } else {
  next(); 
 }
});
export default router;

vue 路由权限

标签:component   def   default   from   world   for   导航   his   ken   

原文地址:https://www.cnblogs.com/lwj820876312/p/9834064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!