vue之router-view组件的使用及二级路由
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue之router-view组件的使用及二级路由相关的知识，希望对你有一定的参考价值。
参考技术A 以饿了么订餐的情景来说吧，在同个页面，切换显示不同组件的相应内容，同时地址栏的地址是会变的vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
对于路由，不同的路由跳转，vue会帮我们刷新路由，但是我今天要说的是，同一路由刷新我们的解决方法。
问题背景：
点击用户头像 => 进入用户个人中心，在用户个人中心里点击其他用户的头像，我希望显示被点击用户的个人中心，但只看到了路由参数在发生变化，页面内容并没有更新。
<script>
export default {
data() {
return {
data: {}
}
},
methods: {
fetchDate() {
// 使用 axios获取数据
......
},
created() {
this.fetchDate();
}
}
</script>
解决办法：
使用 watch，观察路由，一旦发生变化便重新获取数据！
<script>
export default {
data() {
return {
data: {}
}
},
methods: {
fetchDate() {
// 使用 axios获取数据
......
},
created() {
// 组件创建完后获取数据，
// 此时 data 已经被 observed 了
this.fetchDate();
},
watch: {
// 如果路由有变化，会再次执行该方法
"$route": "fetchDate"
}
}
</script>
拓展学习
在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view，而这并不是我们所期望的结果
当然，我们可以在点击事件上加上router.go(0)，强制刷新整个页面来满足效果。但页面整体的刷新会使体验下降，并且作为个人也不是很能接受这样的方法。在查阅了一些资料后，发现可以有以下两种方法可以解决问题。
1、使用watch方法
watch方法据说是官方推荐的方法(抱歉，我没好好看文档)。当id发生变化时，‘$route‘也会相应地发生变化，因此可以通过watch的方法来进行操作。
watch: {
‘$route‘: function (to, from) {
// 我这里还是用了Vuex，不过应该不影响理解
this.$store.dispatch(‘updateActiveTemplateId‘, this.$route.params.templateId)
// 通过更新Vuex中的store的数据，让数据发生变化
this.getTemplateById()
}
},
2、通过改变router-view中的key来达到刷新组件的目的，我现在用的就是这种方法（因为我使用的按需加载，所以加载组件也不会加载所有界面）
<router-view :key="activeDate"></router-view>
//我用了一个简单粗暴的方式来改变key，时间戳（捂脸）
//this.activeDate = new Date()
3、还有一种官方文档的方法
后来看博客有了新方案——beforeRouteLeave
在组件内直接使用，前提是你用了vue-router:
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
以上是关于vue之router-view组件的使用及二级路由的主要内容，如果未能解决你的问题，请参考以下文章
vue项目1-pizza点餐系统6-路由精讲之复用router-view