共计 910 个字符，预计需要花费 3 分钟才能阅读完成。
本次为大家分享一篇解决 vue 多个路由共用一个页面的问题，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。
在日常的 vue 开发中我们可能会遇见多个路由需要共用一个页面的需求，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。例如：
let routes = [
{path:”/zhanshan”,
components:Person,
},
{path:”/lisi”,
components:Person,
},
{path:”/wangwu”,
components:Person,
}
]// 欢迎加入前端全栈开发交流圈一起学习交流：864305860
这种情况的时候，我们发现，其实我们的页面在第一次加载成功后就不会再加载了。所以页面一直显示第一次加载的数据，给人的赶脚好像路由没有生效，而我们通过观察浏览器地址栏中的变化可以确定的是这和路由没关系，这对刚刚开始使用的 vue 的同学可能会产生一点点困扰，其实这和页面的声明周期是相关的，这种情况出现的原因是因为页面在加载后他的大多数钩子函数（mounted，computed…）就不会再次出发了，所以导致页面感觉没有跳转。一道这种业务需求其实也比较好处理，其实我们不需要页面切换，我们只需要页面中的数据发生改变就好了，我们可以在页面中监听路由地址的变化，当地址变化的时候，我们就重新加载数据。
watch:{
“$route”:function(to,from){
//from 对象中包含当前地址
//to 对象中包含目标地址
// 其实还有一个 next 参数的
// 这个参数是控制路由是否跳转的
// 如果没写，可以不用写 next() 来代表允许路由跳转，如果写了就必须写 next(), 否则路由是不会生效的。
}// 欢迎加入前端全栈开发交流圈一起学习交流：864305860
}
每当路由发生变化的时候上面的函数都会被触发，我们可以在这个函数中对页面的数据进行重新加载的操作。如果页面结构变化很大，还是建议单独新建一个不同的页面。上面的问题可能对新入门 vue 的朋友有用，对 vue 比较了解了的朋友请绕过。
结语
感谢您的观看，如有不足之处，欢迎批评指正。
