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(); } })