0%

Vue系列之Vue Router

Basic Knowledge

的基本使用

假如路由的配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default [{
path: '/index',
component: $ => import('@/page/index/Index'),
children: [{
path: 'vocabulary',
component: $ => import('@/page/word/Search'),
children: [{
path: 'detail',
component: $ => import('@/page/word/Detail')
}, {
path: 'starList',
component: $ => import('@/page/word/StarList')
}, {
path: 'starListDetail',
component: $ => import('@/page/word/StarListDetail')
}]
}]
}]

vue的依赖关系如下:

App.vue -> @/page/index/Index.vue -> @/page/word/Search.vue

App.vue:

1
2
3
4
5
<template>
<div id="app">
<router-view></router-view>
</div>
</template>

@/page/index/Index.vue:

1
2
3
4
5
6
<template>
<div class="platform-header">
<div>一些固定内容xxx,比如页头,导航栏之类的<div>
<router-view></router-view>
</div>
</template>

@/page/word/Search.vue:

1
2
3
4
5
<template>
<div>
某个子组件的具体内容xxx
</div>
</template>

这时候可以在浏览器访问http://localhost:8080/#/index/vocabulary,这个时候就可以同时访问到Index和Search组件的内容,此外,如果Search的组件内容有所变化,
改变路径的节点即可实现浏览器页面不调整的变化,这样用户体验更好跟快。