子路由

子路由的应用可以说还是很广的，也就是说当我给某个组件设置了子路由，那么每当我点击这个子路由，这个组件都会显示，就好像淘宝里的推荐，当我选中一类时他会给你推荐相似的，而我这一类会一直留在界面上，只是在下面展示我的各个子路由，下面就来操作一下子路由的配置方法

第一步： 还是新建新的组件，就不多说了

第二步：去到要配置子路由的组件

<template>
  <div class="Hi">
      <p>{{msg}}</p>
      <router-view></router-view>
  </div>
</template>

一定一定要注意我们引入路由机制的这个标签位置很重要，他必须写在一个有内容的的大标签里（这里是div），不然你一写这个标签就会疯狂报错

第三步：去index.js配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path:'/Hi',
      name:'Hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'Hi1',component:Hi1},
        {path:'Hi2',component:Hi2}
      ]
    }
  ]
})

首先：一定要import

然后就去写子路由器配置了，他是写在指定的那个component底下，他也是个数组，根据每个路由都是一个对象相应的去写，因为现在还用不上name，所以这里先省略了name，特别要注意的是，path的写法，后两个是没有/的

第四步：去入口文件App.vue改写模板

<div>
   <router-link to="/">首页</router-link>
   <router-link to="/Hi">Hi页面</router-link>
   <router-link to="/Hi/Hi1">Hi1页面</router-link>
   <router-link to="/Hi/Hi2">Hi2页面</router-link>
   </div>

实际上就是加了后两行