vue页面跳转拦截器

第一步：路由拦截

首先在定义路由的时候就须要多添加一个自定义字段requireAuth，用于判断该路由的访问是否须要登陆。若是用户已经登陆，则顺利进入路由，
不然就进入登陆页面。在路由管理页面添加meta字段vue

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const routes = [ { path: '/', name: "欢迎", meta: { requireAuth: true,  // 添加该字段，表示进入这个路由是须要登陆的
 }, component: resolve => require(["../components/Hello.vue"], resolve) }, { path: '/login', name: "登陆", /*meta: { requireAuth: false, // 添加该字段，表示进入这个路由是须要登陆的 },*/ component: resolve => require(["../view/login/login.vue"], resolve) } ] export default new Router({ base: "/", routes })

　　定义完路由后，咱们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。。因此在main.js加上vue-router

import router from '@/router/router.js'
//实例配置在上面，路由拦截在下面
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) {  // 判断该路由是否须要登陆权限
        if (store.state.token) {  // 经过vuex state获取当前的token是否存在
 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path做为参数，登陆成功后跳转到该路由
 }) } } else { next(); } })