今天看到个Vue项目结构中使用到了<router-view></router-view>,于是了解学习了用法。
首先来看router下的index.js
export default new Router({
mode: 'history',
routes: [
{
//首页跳转到/homepage
path: '/',
redirect:'/homepage',
name:'zhuye'
},
{
//这是homepage页面的说明,说明使用的页面是homepage。其子页面是list和article。
//children的说明是list和aritcle这两个页面会因为点击事件替换页面。
path: '/homepage',
name: 'homepage',
component: homepage,
//默认是使用list的子页面,而不是article。
redirect:'/list',
children: [
{
path: '/list',
name: 'list',
component: list
} ,
{
path: '/articel/:id',
name: 'articel',
component: article,
}
]
},
],
在homepage页面下
<div class="left">
<!--会被替换的界面位置-->
<router-view></router-view>
</div>
<!--点击后,前面的router-view会被替换成list组件的界面-->
<router-link class="series-a" exact-active-class="series" :to="{path:'/list',query:{seriesid:item.id}}"><i class="iconfont"></i> {{item.special_column}}</router-link>
接下来看list页面
<!--此时在list界面点击后,homepage下的router-view的位置的界面会替换成article的界面-->
<router-link tag="div" :to="'/articel/'+item.id" v-for="item in articlelist" :key="item.id" class="post-content">
</router-link>
最后是App.vue
<div class="main">
<router-view></router-view>
</div>
路由跳转展示的页面会在main下显示。即/homepage等页面形成的页面都必须依赖于App.vue下的router-view,它是所有router-view(路由界面)的父组件。如果在App.vue下不添加router-view,那么router跳转界面无显示内容。