我的 github 地址 -vue3.0Study – 阶段学习成果都会建立分支。
==========================
动态路由
在路由某部分里加入[ : ]，就成为动态路由如：/user/:id/，那么路由导航，并不是 /user/id/ 而是 /user/666/。
显然这个 id 能被获取，在组件中使用。通过 this.$route.params 获取。 this 是当前组件，$route 是路由对象，params 是一个对象字面量 { id:666 }。
$route 通过
Vue.use(Router) 和
new Vue({ router, store, render: h => h(App) }).$mount('#app') 全局依赖注入，在所有组件中都可以使用它。1、router.js 中 path: ‘/about’ 路由 改为 path: ‘/about/:id’。
2、About.vue 中 <top-nav title=”军事” :class=”{ active: isActive }”/> 添加红色部分。
3、About.vue 中 data 或者 computed 属性中添加
isActive: function () { return this.$route.params.id === "666"; }4、App.vue 中
<router-link to="/about/666">VUE</router-link>5、About.vue 中
<style lang="less"> .active { background: red; } </style>保存点击【VUE】导航按钮，即可见到效果：
如何取得 $route 中参数的值，便是很大的进步。这个参数可以用在任何地方，可以用来做任何事情。
比如传递数据，根据路由参数动态从服务器获取组件内容等
在进行下一个内容学习之前，commit 一下。
嵌套路由(子路由)
在页面，通常存在多级导航。vue 官方网站便是多级导航的例子：顶部为一级导航栏，左侧为二级导航栏。
导航通常对应 <router-link> 而 <router-link> 与 <router-view/> 对应。
并非只有 App.vue 中才能存在 <router-view/>， 任何组件都可以。
下面把 HelloWorld.vue 变为 About.vue 的子路由：
1、<HelloWorld msg=”vue 官方相关资料的链接”/> 替换为 <router-view/>
2、router.js 中关于 About.vue 组件的路由 替换为
{
path: '/about/:id',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
children: [
{
path: '1',
component: HelloWorld,
props: (router) => ({
