Vue2+VueRouter2+webpack 构建项目实战（五）配置子路由

本文转载自 fungLeo大神的博客，本人现在学习vue，仅仅当做笔记。大神链接：http://blog.csdn.net/fungleo/article/details/53171052

这个页面就比较简单了，大神的项目到此为止了，但是我觉得vue做单页面比较好用，所以心血来潮就想做一下tab栏切换，所以在大神的基础上就增加了一些内容，下个文章我会写出来；

本章讲一下如何配置子路由，因为我们的项目不可能只有一个页面，而是由众多页面构成的。

新建子路由页面

在第二节中，我们新建了一个src/frame/subroute.vue的子页面。当时是留空放在那里的。这里，我们给它填写上内容，代码如下：

<template>
<div>
    <router-view></router-view>
</div>
</template>
 
 
1
2
3
4
5
 
 
1
2
3
4
5

好，我们的子路由页面就构建好了。

新建子页面

我们在src/page文件夹下新建文件夹user，然后在里面新建三个文件index.vue，info.vue和love.vue。代码内容分别如下：

// src/page/user/index.vue
<template>
  <div>user index page</div>
</template>

// src/page/user/info.vue
<template>
  <div>user info page</div>
</template>
// src/page/user/love.vue
<template>
  <div>user love page</div>
</template>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13

好，很简单，三个子页面分别有内容就是了，只是作为演示。

配置routes.js文件

打开src/config/routes.js文件，这个文件就是配置所有路由的文件。首先，在顶部插入下面的代码，引用子路由文件

// 引入子路由
import Frame from '../frame/subroute.vue'
 
 
1
2
 
 
1
2

然后，我们需要引入我们前面写的俩子页面模板。代码如下：

// 引入子页面
import userIndex from '../page/user/index.vue'
import userInfo from '../page/user/info.vue'
import userLove from '../page/user/love.vue'
 
 
1
2
3
4
 
 
1
2
3
4

引入好这些文件之后，我们就开始配置子路由了。

{
  path: '/user',
  component: Frame,
  children: [
    {path: '/',component: userIndex},
    {path: 'info',component: userInfo},
    {path: 'love',component: userLove}
  ],
},
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

如上，新建一个 user的顶级路由节点，把component设置为Frame，然后添加子路由节点children,然后下面分别设置。

我的项目的整体代码演示如下：

// 引入子路由
import Frame from '../frame/subroute.vue'
// 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'
// 引入子页面
import userIndex from '../page/user/index.vue'
import userInfo from '../page/user/info.vue'
import userLove from '../page/user/love.vue'
// 配置路由
export default [
  {
    path: '/',
    component: index
  },
  {
    path: '/content',
    component: content
  },
  {
    path: '/user',
    component: Frame,
    children: [
      {path: '/',component: userIndex},
      {path: 'info',component: userInfo},
      {path: 'love',component: userLove}
    ],
  },
]

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

好，我们通过浏览器访问以下，截图如下：

如上，我们就很顺利的搞好这个子路由了。

小结

这东西真心是难者不会，会者不难。现在vue的各种官方文档和第三方的教程都非常多，但是很苦恼的是，居然没有一个适应新手入门的教程。