解决vue多个路由共用一个页面的问题


Posted in Javascript onMarch 12, 2018

在日常的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多个路由共用一个页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
angular5 httpclient的示例实战
Mar 12 #Javascript
vue 简单自动补全的输入框的示例
Mar 12 #Javascript
webpack打包js的方法
Mar 12 #Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 #Javascript
vue路由懒加载的实现方法
Mar 12 #Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 #Javascript
详解vuex的简单使用
Mar 12 #Javascript
You might like
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
php的ddos攻击解决方法
2015/01/08 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
php格式文件打开的四种方法
2018/02/24 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
详解Python中的各种函数的使用
2015/05/24 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
J2EE模式面试题
2016/10/11 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
学生党员思想汇报
2013/12/28 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
社会实践评语
2014/04/28 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
带你了解Java中的ForkJoin
2022/04/28 Java/Android
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS