='1'//判断store中是否有路由，若有，进行下一步if(route!
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 cookieimport { 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(() => {})
