<template> <el-scrollbar wrapClass="scrollbar-wrapper"> <el-menu mode="vertical" :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" > <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item> </el-menu> </el-scrollbar> </template> <script> import { mapGetters } from 'vuex' import SidebarItem from './SidebarItem' import { validatenull } from "@/utils/validate"; import { initMenu } from "@/utils/util"; export default { components: { SidebarItem }, created() { }, computed: { ...mapGetters([ 'permission_routers', 'sidebar', 'addRouters' ]), isCollapse() { return !this.sidebar.opened } } } </script>
就这样我们动态加载路由就是实现了，是不是很简单，关键点就是router.addRoute方法。下面我就说一下防踩坑点。
三、防坑
1、关于加载菜单信息的时机
在此之前我将第二步获取菜单信息放在我的SideBar组件的create函数中，当时我发现也没有什么问题。登录跳转到home界面 左侧菜单也成功渲染，点击菜单进入我们动态加载的路由界面，也没问题。但是当我点击刷新的时候问题来。页面空白 控制台也不报错。当时我就蒙蔽了，什么情况，不是好好的嘛？如果大家也遇到这种这时候大家不要着急，冷静的分析整个流程，就会发现问题的所在。
1、登陆成功跳转home界面，home组件是公共路由，存在的没问题。
2、这时候 sidebar组件create钩子触发，成功获取菜单列表
3、菜单列表转成路由数组，并且加载到router实例中和vuex中
4、sidebar从vuex获取到路由数组渲染菜单 进入我们动态加载页面中，显示正常，这一切看起来没什么问题
5、点击浏览器的刷新按钮、或者F5，页面空白。
原因： 第五步中我们我们浏览器刷新，在spa应用整个vue实例会重新加载，也是说我的vue-router会重新初始化，那么我们之前的动态addRoute就不存在了，但是我们此时访问一个不存在的页面，所以我们的sidebar组件也就不会被访问，那么也无法获取菜单信息，就导致页面空白。所以我们需要把加载菜单信息这一步放在router的全局守卫beforeEach中就可以了。
2、关于404组件的位置
大家可以看到
export const initMenu = (router, menu) => { if (menu.length === 0) { return } let menus = formatRoutes(menu); // 最后添加 let unfound = { path: '*', redirect: '/404', hidden: true } menus.push(unfound) router.addRoutes(menus) store.commit('ADD_ROUTERS',menus) }
我强调了 404组件一定要放在动态路由组件的最后，不然你刷新动态加载的页面，会跳转到404页面的。
四、效果图
