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中的this.$options.data()和this.$data用法说明
这篇文章主要介绍了Vue中的this.$options.data()和this.$data用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue路由守卫及路由守卫无限循环问题详析
这篇文章主要给大家介绍了关于vue路由守卫及路由守卫无限循环问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
Vue3常用的通讯方式总结与实例代码
Vue.js中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法,下面这篇文章主要给大家介绍了关于Vue3常用的通讯方式的相关资料,需要的朋友可以参考下
2022-05-05
vue脚手架中配置Sass的方法
本篇文章主要介绍了vue脚手架中配置Sass的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue3实现淘宝放大镜效果的示例代码
放大镜效果在很多购物网站都可以看到，本文主要介绍了vue3实现淘宝放大镜效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
Vue动态面包屑功能的实现方法
面包屑功能是我们在项目中经常遇到的功能，今天小编使用Element-UI 进行实现在vue项目中实现面包屑功能，具体实现方式大家跟随小编一起学习吧
2019-07-07
vuex存储token示例
今天小编就为大家分享一篇vuex存储token示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
分分钟学会vue中vuex的应用（入门教程）
本篇文章主要介绍了vue中vuex的应用（入门教程），详细的介绍了vuex.js和应用方法，有兴趣的可以了解一下
2017-09-09
vue父组件向子组件动态传值的两种方法
这篇文章主要介绍了vue父组件向子组件动态传值的两种方法 ,需要的朋友可以参考下
2017-11-11
Vue中rem与postcss-pxtorem的应用详解
这篇文章主要介绍了Vue中rem与postcss-pxtorem的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11