Vue-router嵌套路由的使用
路由使用的时候需要设置路由的路径:ew Router({// mode: 'abstract',routes: [{ path: '/top', component: Top },{ path: '/new', component: New },{ path: '/', redirect: '/top' }]})然后设置路由要渲染的标签:
·
路由使用的时候需要设置路由的路径:
ew Router({
// mode: 'abstract',
routes: [
{ path: '/top', component: Top },
{ path: '/new', component: New },
{ path: '/', redirect: '/top' }
]
})
然后设置路由要渲染的标签:
<template>
<!--@androidback="back"处理了Android返回按钮点击事件,点击返回按钮时,router执行back回退。-->
<div @androidback="back">
<router-view style="flex:1"></router-view>
</div>
</template>
<script>
export default {
methods: {
back: function () {
this.$router.back()
}
}
}
</script>
在切换路由路径的时候使用push:
// Vue.mixin 混合是一种灵活的分布式复用 Vue 组件的方式,所有混合对象的选项将被混入该组件本身的选项,
// 因此上述代码实现为Vue组件增加jump方法,而jump的核心就是路由的跳转。mixin后,可以在vue组件里使用jump方法。
// 例如:<div class="link" @click="jump('/top')">
export default {
methods: {
jump (to) {
if (this.$router) {
this.$router.push(to)
}
}
}
}
嵌套路由
如果要使用嵌套路由,也就是如果在上面的例子中Top组件里面使用路由咋办?
例如top组件如下:
<template>
<div id="app">
<router-view style="flex:1"></router-view>
</div>
</template>
如果要在top中也使用这个路由的话则在Router的配置中增加一个children字段,这样在children中的child就可以被渲染在top中的路由了:
如下:
export default new Router({
// mode: 'abstract',
routes: [
{ path: '/main', component: Main, children: [
{ path: '/main/home', component: Home},
{ path: '/main/customer', component: Customer},
{ path: '/main/record', component: Record},
{ path: '/main/executive', component: Executive}
]},
{ path: '/', redirect: '/main/home' }
]
});
更多推荐
已为社区贡献3条内容
所有评论(0)