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的组件内容有所变化，
改变路径的节点即可实现浏览器页面不调整的变化，这样用户体验更好跟快。