vue靜态路由?1、登錄後跳轉的授權頁redierect.vue，獲取動态路由的數組，存儲于store.ts，我來為大家講解一下關于vue靜态路由?跟着小編一起來看一看吧!

vue靜态路由

1、登錄後跳轉的授權頁redierect.vue，獲取動态路由的數組，存儲于store.ts

2、在main.ts 中引用路由守衛文件

import './router/permission';

3、在permission.ts中用到了

Router.beforeEach

導航前置守衛，在調用路由之前會先調用該方法，在該方法中通過store.ts的路由數組動态渲染路由後訪問。

4、在asyncRouter.js通過定義getAsyncRoutes進行路由數組的格式化，同時此處也可以用來通過接口獲取路由信息，但是我就不查了，太浪費資源。

permission.ts内容如下

// 進度條引入設置如上面第一種描述一樣 import router from '@/router/index' import store from '@/store/index' import api from '@/api/index' // import { getToken } from '@/utils/auth' // get token from cookie import { getAsyncRoutes } from '@/utils/asyncRouter' const whiteList = ['/login','','/redirect']; router.beforeEach( async (to, from, next) => { // NProgress.start() // document.title = to.meta.title; // 獲取用戶token，用來判斷當前用戶是否登錄 const hasToken = true; if (hasToken) { //白名單直接進入 if (whiteList.indexOf(to.path) >0) { next() //next({ path: '/' }) // NProgress.done() } else { //異步獲取store中的路由 const route= store.getroutestatus() ; const hasRouters = route!='null' && route!=null && route!='1' //判斷store中是否有路由，若有，進行下一步 if (route!=null && route=='1' ) { console.log(router.options); next() } else { //store中沒有路由，則需要獲取獲取異步路由，并進行格式化處理 //author:lxfamn date:20210117 descrip: //這裡沒沒有異步獲取路由，而是從本地存儲中直接獲取，因為路由數組已在登錄時獲取完成 try { console.log('路由守衛'); const accessRoutes = getAsyncRoutes(await store.get_routes() ); // 動态添加格式化過的路由 if (accessRoutes.length) { accessRoutes.forEach(item => { router.addRoute('Home',item) }) } store.setroutestatus(1) console.log(to.path) // console.log(router.options); // console.log(router.getRoutes()); // console.log(router.hasRoute('abc')) // console.log(router.hasRoute('About')) // router.addRoute(accessRoutes); next({ ...to, replace: true }) } catch (error) { // Message.error('出錯了') next(`/login?redirect=${to.path}`) } } } } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { next(`/login?redirect=${to.path}`) } } }) router.afterEach(() => { })

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!