本系列前文传送门

一、场景说明

在前面的文章中，我们已经介绍过如何编写多个页面，然后在上一篇文章中，我们为首页实现了一个导航栏。

现在考虑这样一个场景，我们有Home和About两个页面，为了用户在各个页面之间跳转方便，有良好的网页浏览体验，我们考虑在About页面也增加导航栏，如下：

/home                                 /about
+------------------+                  +-----------------+
| Header           |                  | Header          |
| +--------------+ |                  | +-------------+ |
| | Home         | |  +------------>  | | About       | |
| | Content      | |                  | | Content     | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

二、公共组件

当我们需要在About页面中也增加一个相同的导航栏时，我们当然可以直接拷贝一份代码到About页面的代码中，但显然我们不会这么做。

在编程语言中，为了应对相同代码在多处使用的情况，会有函数、类、模块的设计，而在前端框架的设计中，会通过将公共部分或者说相同的代码部分，提取成独立的组件，然后在多处重复使用。

提取公共组件

我们将上次开发好的含导航栏的首页代码复制一份，然后命名为MyHeader.vue如下：

1<template>
2    <div id="app">
3        <div class="header">
4            <div class="content-main">
5                <div class="logo">
6                    <img src="../assets/logo.png" />
7                    <span>我的网站</span>
8                </div>
9                <ul class="nav-items">
10                    <li v-for="item in  routerList " :key="item.id">
11                        <el-link @click="$router.push({ path: item.path })" type="info">
12                            {{ item.name }}
13                        </el-link>
14                    </li>
15                </ul>
16                <div class="user">
17                    <el-button size="mini">注册</el-button>
18                    <el-button size="mini">登录</el-button>
19                </div>
20            </div>
21        </div>
22    </div>
23</template>
24
25<script>
26export default {
27    data() {
28        return {
29            routerList: [
30                {
31                    path: "/",
32                    name: "首页",
33                },
34                {
35                    path: "/product",
36                    name: "产品",
37                },
38                {
39                    path: "/about",
40                    name: "关于我们",
41                }
42            ]
43        }
44    }
45}
46
47</script>
48
49<style>
50li {
51    display: inline-block;
52    margin: 20px;
53}
54
55.nav-items {
56    display: inline-block;
57}
58
59.logo {
60    display: inline-block;
61    cursor: pointer;
62    margin-right: 46px;
63
64    /* >img 表示 class='logo'的元素中的<img>标签 */
65    >img {
66        width: 20px;
67        height: 20px;
68        vertical-align: middle;
69        margin-right: 10px;
70    }
71
72    >span {
73        font-weight: bold;
74        vertical-align: middle;
75    }
76}
77
78.user {
79    display: inline-block;
80    margin-left: 46px;
81
82}
83</style>

然后在原本的首页代码HelloWorld.vue中将导航栏代码作为组件导入，代码改动如下：

由于我们还没有删除原本存在的导航栏代码，所以现在如果成功导入一个新的导航栏后，首页应该要有两个导航栏，我们到浏览器验证这一点，如下：

并且确认两个导航栏的跳转功能都符合预期，然后我们就可以将首页代码HelloWorld.vue中的导航栏代码删除，然后在About代码中，重复我们刚才导入导航栏组件的操作，About.vue代码如下：

1<template>
2    <div id="app">
3        <MyHeader></MyHeader>
4        <h1>This is a About page</h1>
5    </div>
6</template>
7
8<script>
9import MyHeader from './MyHeader.vue';
10export default {
11    components: { MyHeader },
12}
13
14</script>

我们回到浏览器中，就可以看到首页和About页面显示如下，两个页面之间可以非常快速地跳转：

三、嵌套路由

我们刚才的做法，是直接把导航栏作为一个公共组件，然后在用到的页面中导入使用。但如果随着我们的项目规模变大，网站页面增多，我们如果每写一个页面都需要导入一次导航栏组件，就有点重复代码的味道了。

为此，我们可以使用嵌套路由来解决，我们再次看到两个页面的组成如下：

/home                                 /about
+------------------+                  +-----------------+
| Header           |                  | Header          |
| +--------------+ |                  | +-------------+ |
| | Home         | |  +------------>  | | About       | |
| | Content      | |                  | | Content     | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

嵌套路由的用法就是：

在两个具体路径的共同路径对应的页面代码中放入公共部分代码
然后使用<router-view>代表不同的部分
最后将不同的部分作为vue-router实例Router的children参数传入，由vue-router渲染不同的部分来替换<router-view>。

比如这里的/home和/about的公共路径就是/，公共代码是导航栏部分代码，所以应该在路径/对应的代码中放入导航栏组件代码，然后用<router-view>代表Home和About两个页面中各自独有的部分。

因为现在路径/直接对应的是HelloWorle.vue，导航栏代码和首页代码暂时耦合在一起，所以我们需要先把原本的HelloWolrd.vue和About.vue拆成三个代码文件：Layout.vue, HellWorld.vue和About.vue，三个文件代码如下:

HellWorld.vue

1<template>
2    <div id="app">
3        <h1>This is a Home page</h1>
4    </div>
5</template>

About.vue

1<template>
2    <div id="app">
3        <h1>This is a About page</h1>
4    </div>
5</template>

Layout.vue

1<template>
2    <div id="app">
3        <MyHeader></MyHeader>
4        <router-view></router-view>
5    </div>
6</template>
7
8<script>
9import MyHeader from './MyHeader.vue';
10export default {
11    components: { MyHeader },
12}
13</script>

之后在渲染首页的时候，vue-router就会将<router-view>替换成HelloWorld.vue的内容；在渲染About页面的时候，vue-router就会将<router-view>替换成About.vue的内容。

但是我们需要跳转vue-router实例化时传入的routes参数才能实现这个效果。于是我们回到src/router/index.js进行如下代码调整：

回到浏览器，我们可以看到页面已经如我们预期的那样，在两个页面中都展示导航栏了，如下：

之后如果我们再添加新的页面，比如添加一个产品页面Product来对应路径/product，这个改动只需要增加一个Product.vue，然后在src/router/index.js中增加一个路径对应关系，如下：

Product.vue

1<template>
2    <div id="app">
3        <h1>This is a Product page</h1>
4    </div>
5</template>

src/router/index.js代码改动：

回到我们的浏览器，尝试点击导航栏的「产品」就可以跳转到路径/product对应的Product页面，页面内容如下：

可以看到我们不需要在product.vue中添加导航栏的代码就可以让页面平等地拥有相同的导航栏，这就是嵌套路由的好处。当我们的页面相同部分的内容比较多，提取的公共组件也比较多，这种不需要将各个公共组件依次手动导入的做法，优势就会更加明显。

甚至我们会发现，现在点击导航栏在各个页面之间跳转的速度极快，浏览器不需要重新加载页面资源就可以实现页面切换，这就是我们之前提到的vue-router的router-view和router-link进行跳转的好处。(●ˇ∀ˇ●)

本系列下一篇文章传送门

「网页开发｜前端开发｜Vue」07 前后端分离：如何在Vue中请求外部数据

写文不易，如果对你有帮助的话，来一波点赞、收藏、关注吧~👇

「网页开发｜前端开发｜Vue」06 公共组件与嵌套路由：让每一个页面都平等地拥有导航栏

Table of Contents