vue路由——基础篇（三）

上一篇内容我们主要了解了动态路由匹配等知识，这篇博客继续讲解路由的知识点，主要讲解嵌套路由的用法。

嵌套路由

一个页面，通常由多层嵌套的组件组合而成。例如，一个页面中有一个用户组件，而用户组件中可以显示不同的组件，当URL不同时显示的内容不同，那么这种情况就需要使用嵌套组件。 看下例：

路径为/user 映射到 User 组件，当单击 User 组件中的a 标签，会在User 组件中渲染 A组件，单击 b 标签时，会将User 组件中渲染 B组件。我们还是以图书为例，看具体改法：

首先我们来看项目的根组件App.vue：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/books">图书</router-link>|
    </div>
    <router-view />
  </div>
</template>

这个组件没有添加新的代码，只是修改了路由和文字。然后再 src/views 下添加一个 books.vue和 book.vue 两个组件：

//books.vue 组件
<template>
  <div class="hello">
    <div>
      <router-link to="/books/book/1">百年孤独</router-link> | 
      <router-link to="/books/book/2">java从入门到放弃</router-link> | 
      <router-link to="/books/book/3">vue.js从入门到实战</router-link> |
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>

//books.vue 组件
<template>
  <div>
    <br />
    <div>图书编号：{{ $route.params.id }}</div>
    <div>书名：{{book[$route.params.id-1].title}}</div>
    <div>书名：{{book[$route.params.id-1].content}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      book: [
        {
          id: 1,
          title: "百年孤独",
          content: "作品描写了布恩迪亚家族七代人的传奇故事，以及加勒比海沿岸小镇马孔多的百年兴衰",
        },
        {
          id: 2,
          title: "java从入门到放弃",
          content: "讲述了一个某大学生学习java的经历，从入门到放弃",
        },
        {
          id: 3,
          title: "vue.js从入门到实战",
          content: "讲述了一个某大学生学习vue的经历",
        },
      ],
    };
  }
};
</script>

这两个组件一个用于显示图书列表，一个用于显示具体的图书信息。当点击图书列表的某一本书时，就会显示该图书的具体信息，这个就用到了嵌套列表，到显示为止的所有代码都是之前用到过的代码，最主要的还是接下来需要修改的路由代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Books from '../views/books.vue';
import Book from '../views/book.vue';
Vue.use(VueRouter)

const routes = [
    {
        path: '/books',
        component: Books,
        children: [{
            path: '/books/book/:id',
            component: Book,
        }]
    }
]

const router = new VueRouter({
    routes
})

export default router

对比之前的路由代码，我们可以发现，只是多了一个 children 选项。 **children 选项只是路由配置对象中的另一个数组，和routes 对象一样，因此可以根据需求嵌套路由。以/开头的嵌套路径被视为根路径，我们在上列例题中设置的是/books/book/:id，则表示从根路径开始匹配。**所以也可以将嵌套路由修改为：path: 'book/:id' 。