我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue路由监听实现同页面动态加载的示例

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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路由监听实现同页面动态加载的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue路由监听实现同页面动态加载的示例

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么在Vue中利用路由监听实现同页面动态加载

怎么在Vue中利用路由监听实现同页面动态加载?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。watch: { $route.path: function (
2023-06-15

Vue实现动态路由导航的示例

本文主要介绍了Vue实现动态路由导航的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-02-24

VUE 路由动态加载与单页面应用:打造无缝的用户体验

本文探讨了 Vue 路由动态加载和单页面应用在构建无缝用户体验中的作用,并通过代码示例和实例演示进行了解释。
VUE 路由动态加载与单页面应用:打造无缝的用户体验
2024-02-08

编程热搜

目录