VUE在代码中动态添加路由以及children属性，router-view动态展示其他子页面

当之前使用router-view加link来在本页面中显示子页面时，需要在路由中在本页面路由的children属性中配置子页面们的路由，但是这样需要我们提前预知本页面将要显示的子页面的所有路径，那么能不能在代码中动态地将数据里获取到的子页面路径设置进本页面呢？

---

预期功能：使父页面根据一些情形来切换显示自他子页面

举个栗子：如果我们画面的data-table来了一大坨数据，每个数据根据用户状态需要显示不同的页面，那么我们就可以先将里面能获取到的跳向谁的信息进行读取、切割再添加进路由，之后获取我们选中行的信息，根据传参来跳转，让欠钱的先清帐、vip就进豪华页面等等。

一、标准笨重版代码与演示

此时我们必须明确的知道子页面的数量(2个)从而前往router中进行配置。

路由代码:

export default new Router({
	mode: 'history',
	routes: [{
		path: '/testPage',
		name: 'testPage',
		component: testPage,
		children:[{
			path: '/sonPage',
			name: 'sonPage',
			component: () => import('@/components/sonPage')},
			{
				path: '/sonPage2',
				name: 'sonPage2',
				component: () => import('@/components/sonPage2')},
		]
	}

父页面代码:

<template>
  <div>
    <router-link to="sonPage">显示子页面</router-link>

    <router-link to="sonPage2">显示子页面2</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
import Router from "vue-router";
export default {
  name: "testPage",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
</style>

效果：

如此，我们可以在本页面的router-view中通过点击link按钮来回切换，但问题就在于若是我只关注本页面，无从知晓从我这儿将会在未来显示多少个子页面以及对应的路径怎么办呢？

---

这里就开始我们的灵活加载分析：

此时我们不再需要跑库里或者哪里去数一共有多少个子页面，只需要把精力放在如何分割传进我们页面的数据中各种跳转信息即可。

1.首先我们知道this.$router.options可以获得路由信息，那么我们通过log就可以看到options中有一个对象，其中的routes属性中有我们测试页主页的路由信息：

2.接着向内走，定位到我们的路由，此时打印的代码是这样的：

mounted:function(){

      const router = this.$router;

      console.log(router.options.routes[0]);
  }

看看里面的信息：

可以看到这里面已经有了我们刚才在router添加的子路由们，那么既然能查到他们，就一定有办法设置他们，现在我们删除router文件中的children属性，当然我们测试页的路由是不能删的哈哈，不然进不去主页。

现在的信息，确实没有了children属性:

3.我们试试自己定义一个children数组，将其塞进children属性:

此时的代码已经成了如下：

代码思路：

0.*代码中的注释请务必阅读。

1.第一行的数组是假设传进我们页面的初值，我们根据自身情况去分割、筛选处理出子页面name，根据第三条我们自己灵活配合。

2.因为我们唯一知道自己测试页的name与path，所以根据这个来获取到我们页面的路由，
  否则大家一起开发的情景下今天我是第1个说不定明天就第几个了，代码报错只是时间问题。
  
3.一个项目所有页面的存放路径肯定是有规律的，所以在代码里可以根据自身来修改前后拼接的信息。

4.代码里你只需要修改自己画面的name来找到你的路由，以及在循环中修改你项目的拼接规则，第一条的信息获得请根据自身去处理。

mounted: function () {
    //假设数据里有两个画面，这个数据可能来自库，获得的更多我们下面就循环添加更多
    const idArray = ["sonPage", "sonPage1"];

    //获取当前router
    const router = this.$router;

	//获取路由数组
    const routerArray = router.options.routes;

    //获取路由数组中本画面路由对象
    const no = routerArray.findIndex((item) => {
      return item.path == "testPage";
    });

	//自己造的children数组
    const childrenArray = [];

    //遍历画面号数组，为本画面路由添加children属性
    idArray.forEach((item) => {
      childrenArray.push({
        path: item,
        name: item,
        component: () => import("@/components/" + item + ".vue"),
      });
    });

    //children属性赋值
    router.options.routes[0].children = childrenArray;

    console.log(router.options.routes[0]);
  }

查看信息，发现我们的路由里又有了children属性，这时候莫非就可以了？点击发现天真了，路径之下是寂寞的空白：

LOG:

效果:

可以看到路径下什么都没有

4.思来想去，想起刚学编程时曾转换ab两个变量的值因为值传递而无效的问题，一定是路由没生效，查阅资料后在最后加上这句代码：

//路由生效
    this.$router.addRoutes(router.options.routes);

查看LOG，发现vue-router中多了两条，就是我们配置的东西：

5.不幸的是点击之后还是无效，此时我又想，是不是页面的link按钮和后来我改变的路由已经不在一个频道了？那么试试router-link的另一种实现，在代码中调用push方法:

代码:

前端(改为点击事件)：

<!-- <router-link to="sonPage">显示子页面</router-link> -->

    <el-button style="width:100px;" @click="goSonPage">显示子页面</el-button>

后台添加点击事件:

goSonPage() {
      this.$router.push({ name: "sonPage" });
    }

测试效果:

现在发现点击后出现了子页面，至于为什么用router-link就不行了，如果知道请务必交流。

6.到这里我们就可以通过一个按钮来动态添加路由并跳转了，跳向谁我们完全可以把参数传进这个事件里。

---

我是一只学习Java的小蜜蜂

个人主页： 点击参观