解决vue多个路由共用一个页面的问题
在日常的vue开发中我们可能会遇见多个路由需要共用一个页面的需求，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。例如：
let routes = [
{path:"/zhanshan",
components:Person,
},
{path:"/lisi",
components:Person,
},
{path:"/wangwu",
components:Person,
}
]
这种情况的时候，我们发现，其实我们的页面在第一次加载成功后就不会再加载了。所以页面一直显示第一次加载的数据，给人的赶脚好像路由没有生效，而我们通过观察浏览器地址栏中的变化可以确定的是这和路由没关系，这对刚刚开始使用的vue的同学可能会产生一点点困扰，其实这和页面的声明周期是相关的，这种情况出现的原因是因为页面在加载后他的大多数钩子函数（mounted，computed…）就不会再次出发了，所以导致页面感觉没有跳转。
一道这种业务需求其实也比较好处理，其实我们不需要页面切换，我们只需要页面中的数据发生改变就好了，我们可以在页面中监听路由地址的变化，当地址变化的时候，我们就重新加载数据。
watch:{
"$route":function(to,from){
//from 对象中包含当前地址
//to 对象中包含目标地址
//其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
}
}
每当路由发生变化的时候上面的函数都会被触发，我们可以在这个函数中对页面的数据进行重新加载的操作。如果页面结构变化很大，还是建议单独新建一个不同的页面。
上面的问题可能对新入门vue的朋友有用，对vue比较了解了的朋友请绕过。
这篇解决vue多个路由共用一个页面的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍详解vue-router 动态路由下子页面多页共活的解决方案，包括了详解vue-router 动态路由下子页面多页共活的解决方案的使用技巧和注意事项，需要的朋友参考一下 我们都知道 vue-router 的动态路由匹配 对组件是原地复用的策略，需要我们在组件中根据不同的 $route 参数展示不同的数据，这在大部分情景下是很高效的做法，但这无疑增加了组件的复杂度，而且不同参数间切换因
-
多页面的配置如下： 在充值中心配置的路由守卫是想在访问 http://localhost:9000/recharge-center/xxx不存在的页面时重定向到充值中心页面，即 http://localhost:9000/recharge-center，但实际上却会重定向到主页，在控制台也可以看到没有进入充值中心的路由守卫钩子函数，而是进入了主页的钩子函数。 主页的路由: 充值中心的路由: 望解答
-
本文向大家介绍用js提交表单解决一个页面有多个提交按钮的问题，包括了用js提交表单解决一个页面有多个提交按钮的问题的使用技巧和注意事项，需要的朋友参考一下 用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本，然后再执行相应的动作，比较简单。
-
本文向大家介绍vue解决跨域路由冲突问题思路解析，包括了vue解决跨域路由冲突问题思路解析的使用技巧和注意事项，需要的朋友参考一下 vue 简介 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教
-
本文向大家介绍解决vue-router 嵌套路由没反应的问题，包括了解决vue-router 嵌套路由没反应的问题的使用技巧和注意事项，需要的朋友参考一下 先看下route.js 当你访问的时候，发现 http://localhost:8080/#/login http://localhost:8080/#/class 都正常，但是： http://localhost:8080/#/course/
-
qiankun 微应用嵌套vue后，切换侧边栏路由，不显示页面。路由对应的matched和meta，都是空，有遇见这种情况的吗？ 可以正常切换页面显示