解决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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
JavaScript实现优先级队列
Dec 06 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中使用Oracle数据库(4)
2006/10/09 PHP
重新认识php array_merge函数
2014/08/31 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
提高php编程效率技巧
2015/08/13 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
django实现前后台交互实例
2017/08/07 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
园艺师求职信
2014/04/27 职场文书
文明单位创建材料
2014/12/24 职场文书
市场部经理岗位职责
2015/02/02 职场文书
道歉信怎么写
2015/05/12 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技