解决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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 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
海贼王:最美的悬赏令!
2020/03/02 日漫
php简单封装了一些常用JS操作
2007/02/25 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP 无限级分类
2017/05/04 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
python解析json实例方法
2013/11/19 Python
Python常用正则表达式符号浅析
2014/08/13 Python
python中MySQLdb模块用法实例
2014/11/10 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
电子商务自荐书范文
2014/01/04 职场文书
爱国口号
2014/06/19 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
幼儿园小班家长评语
2014/12/30 职场文书