解决vue多个路由共用一个页面的问题
2018-03-12 16:18
761 查看
在日常的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进行build无法正常显示路由页面的问题
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- 解决vue 路由变化页面数据不刷新的问题
- 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 解决vue-router在同一个路由下切换,取不到变化的路由参数问题
- 在CHtmlView中,判断一个页面加载完成的准确方法,解决OnDocumentComplete多次调用问题
- 国产Dwz 同一个页面多个分页标签分页失效或者分页混乱的问题解决办法
- 一个页面使用两次timepicker.js引起的Maximum call stack size exceeded问题解决办法及bug修复
- 一个页面使用两次timepicker.js引起的Maximum call stack size exceeded问题解决办法及bug修复
- 解决一个页面多个window.onload问题
- 一个页面中使用多个iframe导致在ie中假死问题的解决方法
- 解决TabActivity中子页面不通过导航跳转到还有一个页面的问题
- 在url中传递汉字到另外一个页面后,出现中文乱码的问题解决
- 解决Cordova多页面注册backbutton事件,一个页面响应过事件以后,其他页面不响应的问题
- 关于iframe自适应高度,解决一个iframe动态改变url,改变页面同时解决高度自适应问题
- 一个页面放2段图片滚动代码出现冲突的问题如何解决
- 解决一个页面多个Jquery冲突问题
- display不能解决<jsp:include />的问题,jsp异步加载另外一个jsp页面
- 关于shtml页面include问题解决方案因为utf-8的BOM头引起的出现一个空行