解决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接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
AngularJS语法详解
Jan 23 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
小程序实现留言板
Nov 02 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
use jscript List Installed Software
2007/06/11 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python性能优化的20条建议
2014/10/25 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
python对一个数向上取整的实例方法
2020/06/18 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
物理学专业求职信
2014/07/04 职场文书
综治工作心得体会
2014/09/11 职场文书
四风自我剖析材料
2014/09/30 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
Java 超详细讲解hashCode方法
2022/04/07 Java/Android