Vue路由元信息及路由嵌套、子路由

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

路由元信息

在定义路由时，可以在路由映射中使用meta进行元属性的定义

比如每个页面组件都可以具有不同的title，那么就可以定义在路由中

const router = new VueRouter({
  routes: [
    {
      path: '/index',
      component: Index,
      meta: {title: index} // 元属性
    }
  ]
})

组件中获取元属性

$route.meta.title

路由钩子中获取元属性

router.beforeEach((to, from, next) => {
  const title = to.meta.title;
  document.title = title;
  next();
})

路由嵌套

当我们发现，编写的组件为一些全局的公共部分，比如后台的左侧导航，除了使用组件封装复用的思路，还可以通过路由嵌套实现代码复用

比如编写一个组件，它具有一个父路由，通过子路由嵌套的方式，可以让所有符合匹配规则的子路由对应的组件渲染在当前组件中

---

一个导航组件Layout，是这样的

<template>
	<section class="app-main">
        <div>
            这就是导航  
        </div>
        <router-view :key="key" /> 
    </section>
</template>

可以看到，我们使用了router-view标签，这将渲染所有当前组件嵌套路由下的内容

比如当前的导航组件是这样的路由

routes: [
    {
        path: '/',
        component: Layout,
		...
    }
]

那么嵌套路由可以通过children属性进行定义，未来我们其他需要Layout的组件都可以成为这个路由的子路由

参考官方文档的定义方式，如下所示

routes: [
    {
        path: '/',
        component: Layout,
        children: [
        {
          // 当 /profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
]

children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由