登录权限之简易版动态路由(1)
login.vue
setTimeout(() => { this.isLoading = false; if (this.userInfo.name == 'admin' && this.userInfo.pwd == '123456') { Cookies.set('user', 'a'); Cookies.set('teRout', JSON.stringify(teRout)); let sk = filterAsyncRouter(teRout); let newRoutes = constantRouterMap.concat(sk); this.$router.addRoutes(sk); this.$router.push({ path: '/' }); } else { this.$notify.error({ title: '错误', message: '请输入正确的账户密码' }); } }, 100);
teRout.json
[ { "path": "/", "name": "Home", "component": "Home" }, { "path": "/about", "name": "about", "component": "About" } ]
router/rule.js
const _import = require('./_import_' + process.env.NODE_ENV); //获取组件的方法 export function filterAsyncRouter(asyncRouterMap) { let sc = JSON.parse(JSON.stringify(asyncRouterMap)); //遍历后台传来的路由字符串,转换为组件对象 const accessedRouters = sc.filter(route => { if (route.component) { route.component = _import(route.component); // if (route.component === 'Layout') { // //Layout组件特殊处理 // route.component = Layout; // } else { // route.component = _import(route.component); // } } if (route.children && route.children.length) { route.children = filterAsyncRouter(route.children); } return true; }); return accessedRouters; }
_import_development.js
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
_import_production.js
module.exports = file => () => import('@/views/' + file + '.vue')
router/index.js
//https://www.php.cn/js-tutorial-406277.html import Vue from 'vue'; import VueRouter from 'vue-router'; import routes from './router'; import Cookies from 'js-cookie'; import { filterAsyncRouter } from './rule'; import tools from '@/utils/tools'; import topbar from '@/utils/topbar'; Vue.use(VueRouter); const router = new VueRouter({ routes }); router.beforeEach((to, from, next) => { if (localStorage.getItem('new')) { var c = JSON.parse(localStorage.getItem('new')), lastUrl = getLastUrl(window.location.href, '/'); if (c.path == lastUrl) { //动态路由页面的刷新事件 let newRoutes = constantRouterMap.concat([ { path: c.path, component: resolve => require(['@/components/' + c.component + ''], resolve) } ]); localStorage.removeItem('new'); router.addRoutes(newRoutes); router.replace(c.path); //replace,保证浏览器回退的时候能直接返回到上个页面,不会叠加 } } next(); }); var getLastUrl = (str, yourStr) => str.slice(str.lastIndexOf(yourStr)); //取到浏览器出现网址的最后"/"出现的后边的字符 export const constantRouterMap = routes; export default router;
总结: 1>动态路由addRoutes添加需要在vue文件中进行,在路由守卫中搞容易死循环
2>后台传来的路由数组肯定都是字符串,特别注意
"component": "Home",这个Home得是个路径,不能是字符串,所以需要
filterAsyncRouter这个函数去转化,所以组件建的路径很重要