解决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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
Vue中util的工具函数实例详解
Jul 08 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
基于JS实现table导出Excel并保留样式
May 19 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中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
13个PHP函数超实用
2015/10/21 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
python基于queue和threading实现多线程下载实例
2014/10/08 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
详解python 中in 的 用法
2019/12/12 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
用python实现学生管理系统
2020/07/24 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
自我鉴定思想方面
2013/10/07 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
商务代表岗位职责
2015/02/15 职场文书
运动会跳远广播稿
2015/08/19 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
python 中的jieba分词库
2021/11/23 Python
Python函数中apply、map、applymap的区别
2021/11/27 Python
vue动态绑定style样式
2022/04/20 Vue.js