嵌套路由
子路由组件
News.vue
Message.vue
配置嵌套路由: router.js
path: '/home',
component: home,
children: [{
path: 'news',
component: News
}, {
path: 'message',
component: Message
}]
路由链接: Home.vue
<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<router-view></route-view>
向路由组件传递数据
方式 1: 路由路径携带参数(param/query)
1) 配置路由
children: [
{ path: 'mdetail/:id',
component: MessageDetail
}
]
2) 路由路径
<router-link :to="'/home/message/mdetail/'+m.id">
{{m.title}}</router-link>
3) 路由组件中读取请求参数
this.$route.params.id
方式 2:
<router-view>属性携带数据 <router-view :msg="msg"></router-view>
缓存路由组件对象
1) 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
2) 如果可以缓存路由组件对象, 可以提高用户体验
编码实现
<keep-alive>
<router-view></router-view>
</keep-alive>
编程式路由导航
1) this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3) this.$router.back(): 请求(返回)上一个记录路由
4) this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由