若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起

前言

因为是在vue源码的基础上进行修改，所以，就没有复制代码在文章上，采取的是截图对比源码和我修改的代码片段。要麻烦你们自己手敲了。

先来看看效果：

场景：在费用配置列表中，点击每一项的配置，都会在页面容器内部打开一个新页面，所以新页面的路径一样，根据传的参数不同，面包屑和标签页标题动态改变

二级路由效果（这是用菜单管理新建一条隐藏的路由做法，不推荐）

http://localhost/feeManage/feeConfigDetail?id=4&metaTitle=3253的费用配置

http://localhost/feeManage/feeConfigDetail?id=1&metaTitle=eww的费用配置

三级路由效果（推荐）

路由跳转方法：

// 方法1
this.$router.push({
	path: '/feeManage/feeConfig/feeConfigDetail',
	query: {
	id: row.id,},
})
// 方法2
<router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
    <span>点击跳转</span>
</router-link>

若依路由简单介绍：

若依vue前端能跳转到新页面路由的方法，我暂且知道这三种形式：

1 在若依的菜单项添加（不推荐）

缺点：因为路由暴露在外面，会发生被误删或者修改错误的情况，造成严重缺陷。

优点：不用写路由配置的代码，可以直接进行路由跳转了。

同时还要注意，这是详细页面，不应该在左侧菜单栏出现，所以要隐藏

2 在router的constantRoutes里添加路由（推荐）

 3 在router的dynamicRoutes里添加路由（推荐）

若依字典管理的动态路由配置（如果是想实现像若依字典这样的路由跳转效果，就可以直接参考若依的源码去做： 

 

如果需要权限，需要自己写权限标识（很麻烦，，对接很累）

先是后端写上。。。

 然后前端。。。

代码实现

路由配置

实现三级标题的路由怎么写？

{
    path: '/feeManage',
    component: Layout, // 一级这个component: Layout必填，除非是不需要在页面容器里打开的页面
    hidden: true, // false：显示在侧边栏菜单
    redirect: 'noRedirect', // noRedirect：面包屑不可点击，不写这个，父级标题样式就和首页一样，黑字可点击跳转
    meta: { title: '费用管理'}, // 一级标题，写了才能显示在面包屑上
    children: [
        {
            path: '',
            component:{ render: (e) => e("router-view") }, // 如果你的'feeConfig'路径已经在系统菜单中设置过了，这里的path和component就写得和我一样就行，直接跳转三级路由
            hidden: true, // false：显示在侧边栏菜单
            redirect: 'noRedirect', // noRedirect：面包屑不可点击，不写这个，父级标题样式就和首页一样，黑字可点击跳转
            meta: { title: '费用配置'}, // 二级标题，写了才能显示在面包屑上
            // 如果你不需要二级的父级标题，那你就直接把第二个children的内容写在第一个children就行
            children: [
              {
                path: 'feeConfig/feeConfigDetail',
                component: () => import('@/views/feeManage/feeConfigDetail/index'),
                name: 'feeConfigDetail',
                meta: { title: '费用配置', activeMenu: '/feeManage/feeConfig' } // meta.title：三级标题，meta.activeMenu：侧边栏父级菜单高亮
              }
            ]
        }
    ]
  }

也可以这样写（这样写是建立在之前写的跳转路径不规范，如果不想改代码那么多，只能自己在路由这里改，就不用动业务代码里的跳转路径，当然我强迫症，我最后都改了）

  {
    path: '',
    component: Layout,
    hidden: true,
    redirect: 'noRedirect',
    meta: { title: '运营中心' },
    children: [
        {
            path: '/overseas-collocation',
            component:{ render: (e) => e("router-view") }, // 如果你的'merchant'路径已经在系统菜单中设置过了，这里的path和component就写得和我一样就行，直接跳转三级路由
            hidden: true, // false：显示在侧边栏菜单
            redirect: 'noRedirect', // noRedirect：面包屑不可点击，不写这个，父级标题样式就和首页一样，黑字可点击跳转
            meta: { title: '海外拼柜'}, // 二级标题，写了才能显示在面包屑上
            // 如果你不需要二级的父级标题，那你就直接把第二个children的内容写在第一个children就行
            children: [
                {
                  path: 'detail/:id(\\d+)',
                  component: () => import('@/views/operation-center/overseas-collocation/collocation-detail'),
                  name: 'overseasCollocationDetail',
                  meta: { title: '拼柜详情', activeMenu: '/operation-center/overseas-collocation/overseas-collocation' }
                }
            ]
        }
    ]
  }

<router-link :to="'/overseas-collocation/detail/' + scope.row.id">
		<el-button type="text">查看</el-button>
</router-link>

改后

面包屑和标签页动态标题配置

配置完路由后，就要讲，如何动态设置路由path不同参数 在页面容器里打开新页面，面包屑和标签页标题根据参数动态改变

 使用1方法创建好路由后，然后用$router.push设置传的参数，我们使用metaTitle来当页面标题

this.$router.push({
					path: '/feeManage/feeConfigDetail',
					query: {
						id: row.id,
						metaTitle: row.chargeName + '的费用配置'
					},
				})

如果你只做到了这里，你就会发现，它确实跳转页面了，但是它是同一个页面进行了不同参数的刷新，然后页面的标题也没有动态改变，而是你之前菜单配置时写的标题，如图：

                  

 下面就需要改改若依的源码了：

1、先改面包屑

 2、在页面容器中，打开新的标签页，改标签页标题（把要修改文件和修改内容框出来，有个明显的对比，知道改哪里）

 

 最后在新页面取出参数

最后效果

有bug

也是写完上面的内容以后，才发现有bug，路径一样，参数不一样的标签，去单击的时候，没有刷新内容，而是保留第一次点击的标签的页面。。。如图

bug解决

原因：若依vue前端源码中用的<router-link>标签进行页面跳转，因为路径一样，参数不一样的页面本质上都是同一个vue，而这个vue已经加载出来就不会进行销毁重新加载了，所以我们要做的就是监听参数然后重新渲染，达到刷新页面的效果

在自己的跳转页面vue中监听路由参数：

二级路由效果

三级路由效果

ps: 找到更好的写法就又补充了一下，所以截图上有些不统一，记得看字看描述哈！