Vue基础四——Vue-router配置子路由

我们上节课初步了解Vue-router的初步知识，也学会了基本的跳转，那我们这节课学习一下子菜单的路由方式，也叫子路由。子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。我们接着第一节课的实例，在Hi页面的下面新建两个子页面，分别是 “Hi页面1” 和 “Hi页面2”，来实现子路由。

1.2.1、改造App.vue的导航代码

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

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>

这时候我们在访问主页的时候导航栏就发生了变化。多出了两个自导航：Hi页面1 和 Hi页面2

1.2.2、改写components/Hi.vue页面

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

components/Hi.vue,就是第5行的代码，其他代码不变。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "hi",
  data() {
    return {
      msg: "Hi, I am Hi page."
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

1.2.3、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue
新建的模板和Hi.vue没有太多的差别，只是改变了data中message的值，也就是输出的结果不太一样了。

Hi1.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "hi1",
  data() {
    return {
      msg: "Hi, I am Hi1 page."
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Hi2.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "hi2",
  data() {
    return {
      msg: "Hi, I am Hi2 page."
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

1.2.4、修改router/index.js代码

我们现在导航有了，母模板和子模板也有了，只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。

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

children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。具体看一下这个子路由的配置写法。

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

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

export default new Router({
  routes: [ //配置路由，这里是个数组
    { //每一个链接都是一个对象
      path: '/', //链接路径
      name: 'HelloWorld', //路由名称，
      component: HelloWorld //对应的组件模板
    },
    {
      path: '/hi',
      name: 'Hi',
      component: Hi,
      children: [
        { path: '/', name: 'hi', component: Hi }, 
        { path: 'hi1', name: 'hi1', component: Hi1 }, 
        { path: 'hi2', name: 'hi2', component: Hi2 }
      ]
    }
  ]
})

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

总结： 这节的内容在路由配置里经常用到，比如我们作一个购物模块，购物模块里有很多相同的元素，我们就会利用这种子路由的形式，先定一个父页面，然后再修改子页面。希望这节课对你有帮助，其实子路由的步骤还是有些繁琐的，所以希望你们多练习几遍，能够完全掌握。