首页 > 其他分享> 文章详细

实现简单版VueRouter嵌套路由

2021-07-28 19:57:35 阅读：187 来源： 互联网

标签：about parent route current 嵌套 VueRouter 路由 matched

实现简单版VueRouter嵌套路由

介绍

本文是承接上文《实现简单版VueRouter》的扩大版，在原有基础上加入嵌套路由功能，以用于更深入的学习VueRouter。多有不足之处，请多多交流。

内容拆分

实现VueRouter的嵌套路由功能，主要有两点：

路由匹配时获取代表深度层级的matched数组
- router-view深度标记

插件测试

修改路由信息以供实现过程中输出信息查看，也便于发现错误问题。

修改 krouter/index.js 中路由信息

// 修改前
{
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
}
// 修改后
{
    path: "/about",
    name: "About",
    component: () =>import("../views/About.vue"),
    children:[
        {
            path: "/about/info",
            component: {
              render(h) {
                return h('div', 'info page')
              },
            }
        }
    ]
  },

修改 about.vue 页面

<!--修改前-->
<div class="about">
    <h1>This is an about page</h1>
    <router-view></router-view>
</div>
<!--修改后-->
<div class="about">
    <h1>This is an about page</h1>
    <router-view></router-view>
</div>

功能实现

matched数组和match方法

matched数组建立

由于是嵌套路由，所以需要在路由变化时找到当前路由相关的路由信息保存起来。而因为嵌套层级的不确定性需要以数组形式进行保存。

该数组的能力囊括了上一篇文中的current的作用，所以在这里将current废弃掉。

// 修改前
const current = window.location.hash.slice(1) || '/';
Vue.util.defineReactive(this, 'current', current)
// 修改后
this.current = window.location.hash.slice(1) || '/';
Vue.util.defineReactive(this, 'matched', []);

match方法

matched数组建立后，需要执行一定操作根据当前地址栏路由路径将匹配的路由信息填充到数组中。

为了便于递归操作，给match方法添加routes参数。

match(routes) {
    routes = routes || this.$options.routes;
    // 递归遍历
    for (const route of routes) {
      if (route.path === '/' && this.current === '/') {
        // 该情况下为首页匹配
        this.matched.push(route);
        return;
      }
      if (route.path != '/' && this.current.indexOf(route.path) != -1) {
        this.matched.push(route);
        if (route.children) {
          this.match(route.children)
        }
        return;
      }
    }
  }

路由深度标记

在router-view组件中进行路由的深度进行标记，再从matched数组中获取到对应的组件信息，通过render函数渲染出来。

  export default {
  render(h) {
    // 标记当前深度
    this.$vnode.data.routerView = true;

    let depth = 0;
    let parent = this.$parent;
    while (parent) 
      const vnodedata = parent.$vnode && parent.$vnode.data;
      if (vnodedata) {
        if (vnodedata.routerView) {
          // 说明当前parent是一个router-view
          depth++;
        }
      }
      parent = parent.$parent;
    }
    // 获取匹配path的component
    let component = null;
    const route = this.$router.matched[depth];
    if (route) {
      component = route.component;
    }
    return h(component);
  },
}

这一部分的重点在于while循环查找，当前的this指向路由显示页面的router-view组件，通过循环不断的向上查找从而确定路由的深度，还是要多加思考和理解。

App组件 2

div#app 3

a# 4

a#/about 5

about组件 6

div.about 7

router-view 8

标签：about,parent,route,current,嵌套,VueRouter,路由,matched
来源： https://blog.csdn.net/tianqingmuyu/article/details/119188494

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

实现简单版VueRouter嵌套路由