vue-cli（Vue-Router）嵌套路由的使用

2018-07-28 分类：Vue 作者：huanggr 阅读（3360）

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

二级路由的添加

index.js

在about中添加二级路由

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

//二级导航,用到的才可以添加，不用的不能添加
import hobby from '@/views/hobby'
import study from '@/views/study'
import work from '@/views/work'

export default new Router({
// 更改路由模式
mode:"history",
// 点击的每一个都是这个颜色
linkActiveClass:'is-active',
routes: [
{
path: '/about',
name: 'About',
component: About,
children:[
{
path:'study',
component:study
},
{
path:'hobby',
component:hobby
},
{
path:'work',
component:work
},
]
},

about.vue中的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>
<div class="about">
<h1>about</h1>
<router-link to="/about/study" >
<a>study</a>
</router-link>
<router-link to="/about/work" >
<a>work</a>
</router-link>
<router-link to="/about/hobby" >
<a>hobby</a>
</router-link>
<router-view/>
</div>
</template>

设置二级路由的默认路由

上面的内容表示的是只有当我们具体的访问about下面的路由的时候我们二级目录组件才会被显示，那么我们想当我们访问about的时候，下面的默认的组件就会被渲染，我们怎么去做呢，看如下的步骤:

path为空即可

1
2
3
4
5
6

children:[
{
path:'', //默认的子路由
component:study
}
]

exact（精确匹配）

如果有子路由，父路由就最好不好添加name属性，我们可以将about的name属性（name: 'About',）添加到子路由中的默认路由中，这样就不会警告了

使用别名（name）进行访问

about.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>
<div class="about">
<h1>about</h1>
<router-link :to="{name:'Study'}" >
<a>study</a>
</router-link>
<router-link :to="{name:'Work'}" >
<a>work</a>
</router-link>
<router-link :to="{name:'Hobby'}" >
<a>hobby</a>
</router-link>
<router-view/>
</div>
</template>

index.js中

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

{
path: '/about',
component: About,
children:[
{
path:'',
name: 'About',
component:study
},
{
path:'study',
name: 'Study',
component:study
},
{
path:'hobby',
name: 'Hobby',
component:hobby
},
{
path:'work',
name:'Work',
component:work
},
]
},

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(3) 打赏

标签：

上一篇：Vue-cli（Vue-router）中的重定向和别名

下一篇：vue-cli（Vue-Router）命名视图