(二)Vue-router 配置子路由

本节知识点

• 子路由就是比如从列表页跳转到文章页，路径是/hi/hi1这个样子的。

实现子路由

• 首先第一步在components文件夹下面创建2个文件，起名叫做Hi1.vue另外一个叫做Hi2.vue

Hi1.vue

Hi2.vue

特别注意的就是要是css或者JS文件太多的话可以独立出来格式就是

• 第二步在app.vue里面写好链接

  跳转到hi页面下面的hi1
   跳转到hi页面下面的hi2

• 第三步 重点写路由 index.js

首先需要引入两个组件

import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

然后配置路由 简单来说就是加个children属性,这里千万注意了路径前面不要写/,然后在配置组件

  {
      path:'/hi',
      name:"Hi",
      component:Hi,
      children:[
        {path:"/",component:Hi,name:"Hi"},
        {path:"hi1",component:Hi1,name:"Hi1"},
        {path:"hi2",component:Hi2,name:"Hi2"},
      ]
    }

• 第四部在 hi.vue下面加入 这样就把hi.vue打造成了一个父页面了

特别注意的就是模板文件里面必须要有包裹层否则router-view出不来