vue router 动态路由及菜单实现之一_el-menu递归出router.js中的路由 ...

序号	内容	连接地址
1	vue router 整合引入	https://blog.csdn.net/qq_21271511/article/details/109368459
2	vue router 模块化开发	https://blog.csdn.net/qq_21271511/article/details/109369247
3	vue router 动态路由及菜单实现之一	https://blog.csdn.net/qq_21271511/article/details/109496415
4	vue router 动态路由及菜单实现之二	https://blog.csdn.net/qq_21271511/article/details/109998976
5	vue router 动态路由及菜单实现问题汇总	https://blog.csdn.net/qq_21271511/article/details/110038256
6	vue el-menu多级菜单递归	https://blog.csdn.net/qq_21271511/article/details/109889934
7	vue router 懒加载常见写法	https://blog.csdn.net/qq_21271511/article/details/109776741

vue router 动态路由实现之一

router.addRoutes

要动态添加路由，主要用到的方法就是router.addRoutes
但这个方法在官方api的解释：

没错，就是这么简单，这个看第一眼就知道要苦了。但该用还得用嘛，要踩的坑肯定要踩的。

用法看起来很简单，就只要符合RouterConfig的格式数组就可以了。

就是像这样的数组，直接传进去就可以了。手写代码有点不好的就是容易错了找不到，所以如果不是为了学习，还是复制粘贴的效率高些。

router.js的改造

router.js路由文件的改造思路：
1、加载静态路由，用户能直接访问的路由，不需要判断权限就需要直接展示的。
2、加载动态路由，需要判断用户权限，需要从后台传过来，需要动态生成菜单的。

router.js

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: []
/* 加载可以直接访问的路由 */
router.addRoutes(constantRoutes1);
/* 加载后端路由 */
router.addRoutes(filterAsyncRouter(asyncRoutes));
/* 加载 404 */
router.addRoutes(constantRoutes2);
// 路由变化时
router.beforeEach((to, from, next) => {
  if (document.title !== to.meta.title) {
    document.title = to.meta.title;
  next()
export default router
新建 constrouter.js 
/* constantRoutes静态路由，所有用户均可访问 */
export const constantRoutes1 = [
        path: '/',
        redirect: '/login'
    // 系统登录    
        path: '/login',
        name: 'Login',
        component: () => import('@/layout/login'),
        meta: {
            title: '用户登录'
/* constantRoutes静态路由，所有用户均可访问 */
export const constantRoutes2 = [
        path: "/system",
        redirect: '/system',
    ...ERROR,
        path: '/*',
        redirect: '/404',
动态生成路由
 
动态生成路由最关键的是怎么将 component 后面的参数由后台传递过来，并进行转化成router可以识别的样子，毕竟后台不可能传这样的过来，这个也不是一个字符串。 
() => import('@/layout/login'),
这里先看一眼之前的菜单文件，这里已经把component参数给加好了，如果直接用el-menu的话，这个参数用不上。role也是新加的，后续留着判断菜单权限用。 
const asyncRoutes = [
        "path": "/system",
        "name": 'SystemIndex',
        "component": "system",
        "meta": {
            "title": "系统管理",
            "icon": "el-icon-setting",
            "role": [
                "admin"
        "children": [
                "path": "role",
                "component": "system/role",
                "meta": {
                    "title": "角色管理",
                    "icon": "el-icon-star-on",
                    "role": [
                        "admin"
                "path": "user",
                "component": "system/user",
                "meta": {
                    "title": "用户管理",
                    "icon": "el-icon-user-solid",
                    "role": [
                        "admin"
                "path": "menu",
                "component": "system/menu",
                "meta": {
                    "title": "菜单管理",
                    "icon": "el-icon-menu",
                    "role": [
                        "admin"
                "path": "trans",
                "component": "system/trans",
                "meta": {
                    "title": "多系统",
                    "icon": "el-icon-s-opportunity",
                    "role": [
                        "admin"
                "path": "test",
                "component": "system/home",
                "meta": {
                    "title": "系统测试",
                    "icon": "el-icon-success",
                    "role": [
                        "admin"
注意：这里的component千万别手贱写个components。多个s，component匹配不上，还找不到为什么真的会怀疑人生。 
现在需要将这里的component的字符串参数转化一下 
//遍历后台传来的路由字符串，转换为组件对象
export function filterAsyncRouter(asyncRouterMap) { 
    const accessedRouters = asyncRouterMap.filter(route => {
        if (route.component) {
            if (route.component === 'system') {
                route.component = system
            } else {
                // console.log("load:" + loadView(route.component));
                route.component = loadView(route.component)
                // console.log("import:" + __import(route.component));
                // route.component = __import(route.component)
        if (route.children && route.children.length) {
            route.children = filterAsyncRouter(route.children)
        return true
    return accessedRouters
/* 加载路由组件，两种方式均可 */
const loadView = (view) => { // 路由懒加载
    // return (resolve) => require([`@/views/${view}`], resolve)
    return () => import('@/views/' + view)
这里要规划好应用页面的路径，不然就得多加判断了。 
查看动态路由
 
这块可以说是最关键了，不然这个生成完了那里写错了，为什么找不到路径，总是404就会很难受。 
在官网上找到了这个方法 
$route.matched
类型: Array<RouteRecord>
一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。
找了半天的路径在router.matcher中发现了。静态和动态路由都使用addrouters方法添加，所有的path就会addRouters中的Scopes中转成一个pathList。
 
 整个router关键信息的位置，这里面还有其他的一些 alias、match、nameMap，还有对应的redirect。所以在后续后台传过来的东西中
 这些也是可以包含使用了。
  
el-menu动态生成菜单
 
动态路由完成了，前端基本上没什么需要改的，el-menu 加上router属性，index属性将会用于激活route action的path 
whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action

 这里就没有写递归了，直接 for和if写了三层判断，一般菜单也不会超过三层。 
最终效果如下
 
				VUE-ELEMENT实现递归路由组件
        刚入行前端的小伙伴们应该都是在公司框架之上进行开发的吧，菜单路由接口调用都给安排的好好的，需要做的只是创建一个vue，链接上路由，开发业务。
        当然啦，仅会写业务的前端格局还是不够打开的，前端更新如此之快系统风格让人眼花缭乱，说不定哪天产品就会觉得之前的框架怎么这么low，你来再重
				最近在学习Vue3的相关语法，在阅读官方文档的时候觉得官方文档的菜单栏比较简洁美观，于是想着能不能自己实现一个类似的多级菜单。代码大部分由AI所做（感谢活在这个人工智能时代）。
主要就是路由设计以及菜单设计在 中进行路由配置，配置的信息示例如下：
各参数解释如下：菜单由两个组件实现：、，同时使用递归思想实现多级菜单渲染。递归子菜单组件，负责：显示的的子菜单，主菜单 组件中调用，如果有子菜单，则显示子菜单下拉框，效果如下图（具体显示位置有css控制）：
组件主要代码如下：
AdvancedMenu 组件
				<el-menu router :default-openeds="['1','0']">
        <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
        <template slot="title"><i class="el-icon-sell"></i>{{item.name}}</template>
				公司项目做整理需要将前端vue项目菜单修改成动态菜单+动态路由。
1.动态路由
了解需求后查看了package.json使用的是Vue.js 官方的路由管理器：vue-router。
1. 查看vue-router官方文档发现vue-router有 添加新路由规则的函数，函数有三个：
router.addRoutes(routes: Ar...
				我们在搭建Web的后台管理系统时，会选择 ElementUI 进行快速搭建，但是在某些场景下，单纯的使用组件是不能满足要求的。
因为需求是在不断增加，不断变化的，如果像 ElementUI 给的示例去维护后台管理系统的菜单栏的话，代码会非常臃肿，维护起来也不是很方便：
菜单是一个树形结构，VueRouter的配置项 routes 也是树形结构，每一个具体的路由都对应着一个页面，因此可以利用 routes 来配合 ElementUI菜单组件 动态生成菜单。
大体思路如下：
（1）拿到routes：	this
如果我们采用 ElementUI 库中的 el-menu 组件来实现的话，效果会很不错，但是代码的画风可能是这样的：
    <el-menu>
      <el-submenu index="1">
        <el-menu-item index="1-1"></el-menu-item>
        <el-menu-item index="i-2"&
				一，情景再现
做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是：
前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中，整个过程大致如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import s
				org.springframework.web.HttpRequestMethodNotSupportedException: Request method ‘POST‘ not supported
					25263
				Java基础10——扩展赋值运算符、三元运算符及运算符小结(本文为个人学习笔记，内容整理自哔哩哔哩UP主【遇见狂神说】的公开课程。 ＞ 所有知识点归属原作者，仅作非商业用途分享)