vue多个路由共用一个页面问题
来源:互联网 发布:蚁群算法代码 编辑:程序博客网 时间:2024/05/01 14:58
在日常的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比较了解了的朋友请绕过。
阅读全文
0 0
- vue多个路由共用一个页面问题
- (三)vue 一个页面多个视图
- 多个页面共用一个js文件,但是有些页面没有某个元素,导致报错
- vue多页面多路由开发环境
- vue-cli实现多页面多路由
- ASP.NET 页面多个button共用一个事件进行增删改查
- 多个控件共用一个事件
- 多个控件共用一个消息响应函数
- 多个控件共用一个响应
- 多个Market共用一个InfoWindow
- 多个tableview共用一个控制器
- 多个tableView共用一个Controller
- vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
- vue——路由变化页面数据不刷新问题
- 多个浏览器窗口共用一个session的问题(转)
- 关于多个布局文件中的view共用一个id的问题的探讨
- 一个解决方案多个项目共用一个cs文件
- vue.js用vue-router路由传参时页面刷新后参数消失的问题
- 关于iOS多线程,我说,你听,没准你就懂了!(看过的文章中个人认为最通俗易懂的)
- Hive学习笔记 --- Hive文件存储格式
- 关于jsp/html页面向后台传输参数时会出现乱码问题
- Java8的日期、时间类
- 还原Git上commit,但是没有push代码
- vue多个路由共用一个页面问题
- Flume-1.7.0的安装和配置
- 洛谷P3372 【模板】线段树 1
- SVN版本冲突,遇到<<<<<<< .mine,=======,>>>>>>>.r37242怎么解决?
- Python 各种数据格式间的转换
- 九度OJ —— 1003
- 【2016-2017】陪伴是最长情的告白
- Android 布局 fill_parent、wrap_content和match_parent的区别和作用
- rqnoj 99