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

赞 (0)

相关推荐

  • vue+element实现动态加载表单

    vue+element实现动态加载表单

    本文实例为大家分享了vue+element实现动态加载表单的具体代码,供大家参考,具体内容如下 一.问卷动态加载表单 //html <el-form :model="quesPaper" status-icon label-width="100px" label-position="top" size="small" v-loading="paperLoading" > <el-form-

  • vue动态加载SVG文件并修改节点数据的操作代码

    先上一个马赛克图片叭. 接领导需求,动态实现电路图, 并附带放大.缩小功能. 以及不同的回路点击能弹窗显示相关节点的更多信息, 通俗一点讲: 随着用户点击放大和缩小, 点击位置保持不变,而且能实现点击交互. 初接触的时候,觉得根本没法下手呀,说说自己的思路叭, 从随着用户点击放大缩小位置不变,想到了SVG 但是需要动态加载进来呀,而且还需要需求不同节点的电流值, 从放大缩小来看, 首先想到的是 D3 在集合领导给的部分相关资料 综上: 进行了可行性的方案试探,也完成了整个功能的开发. 且听我细细

  • vue addRoutes路由动态加载操作

    需求:增加权限控制,实现不同角色显示不同的路由导航 思路:每次登陆后请求接口返回当前角色路由 核心方法:vue-router2.2.0的addRoutes方法 + vuex 以下是我实现的获取菜单路由的方法,我将该方法的调用放在首页组件的生命钩子中,即便用户刷新浏览器清空了路由还是会重新调用接口获取,不至于会丢失.同时考虑到会有切换用户的可能,所以不将获取到的路由信息保存到cookie或者localstorage当中 获取菜单之前先判断routerState,避免多次请求, 我这里使用eleme

  • vue 使用async写数字动态加载效果案例

    父组件 <interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number> import IntervalNumber from './IntervalNumber.vue' components:{ IntervalNumber, } 子组件 <template> <span class="Interv

  • 解决Vue动态加载本地图片问题

    最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译的步骤,直接将获取到的数据当作字符串显示. 解决方法: 1.在当前界面全局import图片地址 //使用import引入 import img1 from './img/img1.png' import img2 from './img/img2.png' export defa

  • vue+element使用动态加载路由方式实现三级菜单页面显示的操作

    需要用到中间件的方式,这样就可以实现了我们想要的方式 publish-center.vue <template> <router-view></router-view> </template> <script> export default { } </script> <el-menu :default-active="$route.path" class="el-menu-vertical-dem

  • vue2.* element tabs tab-pane 动态加载组件操作

    一.重要部分 1. 注意 <component :is=item.content></component> :表明模板 <el-tab-pane v-for="(item) in editableTabs" :key="item.name" :label="item.title" :name="item.name" > <component :is=item.content>&l

  • vue实现路由监听和参数监听

    1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu": this.$router.push({ name: "AppAccountInfo", }); break; //在菜单路由上存储各种需要信息 case "publicDocInfoMenu": //菜单code: publicDocInfoMenu data.i

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

  • vue render函数动态加载img的src路径操作

    分享一下我去如何解决vue render 中 如何正确配置img的src 路径? 一.我的项目中有俩层组件, 第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件 二.render函数中需要创建<img>标签,img中的src是父组件传进来的: src正确传进来,图片却不不显示. 三.解决办法: 首先在父组件中将图片import进来, import empty from "./img/empty.png"; 在父组件的data中声明一个变量,将e

随机推荐