Vue-router配置子路由

子路由

子菜单的路由方式，也叫子路由。子路由一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。

改造App.vue的导航代码

先改造app.vue的导航代码，来实现基本的导航功能。我们用<router-link>标签增加了两个新的导航链接。

App.vue 导航代码

再访问主页的时候导航栏就发生了变化。多出了两个导航：Hi1页面 和 Hi2页面

修改components/Hi.vue页面 

把Hi.vue改成一个通用的模板，加入<router-view>标签，给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面，有点像继承关系。

在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue 

新建的模板和Hi.vue没有太多的差别，只是改变了data中msg 的值，也就是输出的结果不一样了。

Hi1.vue

Hi2.vue

修改router/index.js代码

修改路由配置文件

子路由的写法是在原有的路由配置下加入children字段。

children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。

需要注意的是，在配置路由文件前，需要先用import引入Hi1和Hi2。