vue-router详解-配置子路由（2）

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

下面举一个简单的例子：在Hi页面的下面新建两个子页面，分别是 “Hi页面1” 和 “Hi页面2”，来实现子路由。

在app.vue页面新增导航页面：Hi页面1、Hi页面2

 <p>导航：
      <router-link to="/">首页</router-link> |
      <router-link to="/hi">Hi页面</router-link> |
      <router-link :to="{name:'Hello/Hi/Hi1',params:{username:'JSPang', id:'888'}}">-Hi页面1</router-link> |
      <router-link to="/hi/hi2">-Hi页面2</router-link> |
</p>

创建Hi1、Hi2页面

<template>
<div>
    <h2>{{msg}}</h2>
    <hr>
    <h3 v-if="$route.params.username" style="color:red">{{$route.params.username}}-{{$route.params.id}}</h3>
    <h2 v-if="$route.query.username" style="color:green">{{$route.query.username}}-{{$route.query.id}}</h2>
</div>
</template>

<script>

export default{
    data() {
        return {
            msg:'I am Hi1 component'
        }
    }
}
</script>

<template>
<div>
    <h2>{{msg}}</h2>
</div>
</template>

<script>

export default{
    data() {
        return {
            msg:'I am Hi2 component'
        }
    }
}
</script>

配置路由文件：

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

Vue.use(Router)   //Vue全局使用Router

export default new Router({
  // 路由模式设置：（history模式（不带#）和hash模式：（带#））
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: HelloWorld
    },
    {
      path: '/hi',
      component: Hi,
      children:[
        { path: '/', name: 'Hello/Hi', component: Hi},
        { path: 'hi1', name: 'Hello/Hi/Hi1', component: Hi1},
        { path: 'hi2', name: 'Hello/Hi/Hi2', component: Hi2}
      ]
    })