Vue路由监听实现同页面动态加载的示例
更新时间：2021年05月21日 11:01:53 作者：java_web攻城狮
本文主要介绍了Vue基于路由监听实现同页面动态加载的示例，重点在于切换路由的时候,重新拉取列表数据，接下来看看实现方法吧
场景分析
在系统中一个模块有三个子模块. 业务数据中可以直接根据类型去区分这个三个子模块的归属. 通常情况下.我们是写在同一个模块中然后去选择业务类型. 但是业主要求,将这个拆分成三个菜单.用户根据自己的需求去选择需要使用的模块.
这个三个菜单使用的是同一张数据表. 所以我们肯定只写一个 list,add,edit页面的. 然后根据进入页面的路由来判断属于哪一个分类.并跳转指定分类的 新增,编辑, 和调用对应的列表接口页面
开发
由于三个模块使用的相同的页面.所以需要配置三份路由.并且做出页面区分 .然后现在遇到的问题是. 由于三个菜单虽然路由不同但是页面是同一个页面 .切换菜单的时候并不会再出触发vue的钩子函数 .然后三个list页面查询的数据相同.也就是不会触发查询方法.导致不能切换条件.
然后网上搜了一下 watch监听时间. 发现可以通过监听实现路由变化的时候触发列表数据加载方法 . 具体代码如下
列表页面的路由分别在list后面添加了1,2,3 用于区分是哪个页面
watch: {
'$route.path': function (newVal, oldVal) {
// 参数 新旧路由path type是全局定义的 三个类型菜单
this.type = newVal.substr(newVal.lastIndexOf("/") + 1);
this.search();
}
},
然后这样可以切换路由的时候,重新拉取列表数据. 同时create方法里面也需要调用search.因为路由监听只作用于本页面.其它页面切换路由到这个菜单时不会触发.
created () {
let path = this.$route.path;
this.type = path.substr(path.lastIndexOf("/") + 1);
this.search();
},
总结
在实际开发中,可以根据自己的需求选择监听属性
watch:{
//监听路由变化
$route( to , from ){
console.log( to , from )
// to , from 分别表示从哪跳转到哪，都是一个对象
// to.path ( 表示的是要跳转到的路由的地址 );
}
}
以上就是Vue路由监听实现同页面动态加载的示例的详细内容，更多关于Vue路由监听实现同页面动态加载的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue.js中关于点击事件方法的使用(click)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue项目获取url中的参数，本文通过两种情况分析给大家详细介绍，感兴趣的朋友一起看看吧2022-08-08
这篇文章主要介绍了Vue的方法和属性案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
这篇文章给大家介绍了ElementUI实现el-table列宽自适应的详细步骤,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了vue组件生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本文主要介绍了vue开发中的base和publicPath的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-07-07
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
这篇文章主要介绍了vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了element table 数据量大页面卡顿的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了vue键盘事件点击事件加native操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue中@click.stop和@click.prevent实例详解
当我们使用Vue.js开发前端应用时,经常会在模版中使用@click指令来响应用户的点击事件,这篇文章主要给大家介绍了关于Vue中@click.stop和@click.prevent的相关资料,需要的朋友可以参考下2024-04-04
最新评论