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


Posted in Javascript onOctober 29, 2019

1、路由携带数据跳转

routerAction(hideDisplays, data) {
  switch (hideDisplays) {
    case "pubAccountMenu":
      this.$router.push({
        name: "AppAccountInfo",
      });
    break;
    //在菜单路由上存储各种需要信息
    case "publicDocInfoMenu": //菜单code: publicDocInfoMenu
      data.instanceInfo.active = 4 //标记已点击的标签页
      data.instanceInfo.fromMenu = true
      data.instanceInfo.editOrAdd = false;
      this.getUcMenuInfo(data.instanceInfo) //数据、对象等
      this.$router.push({
        name: "DocumentInfoMaint",
        params: {
          instanceInfo: data.instanceInfo,
          uuid: data.uuid,
          breadCrumb: data.instanceInfo.name,
          breadCrumbEn: En_Name,
          prefix: 'text.breadCrumb.MyUseCase', //面包屑信息
          prefixPath: '/MyApplications',
          breadPath: '/AppInfo/' + data.uuid,
          routeName:'AppInfo',
          prefixRouteName:'MyApplications',
          firstRoute:true
        }
      });
    break;
  }
}

2、路由监听

watch: {
 $route: function (to, from) {

  if (this.$route.params.instanceInfo) {
   // let data = JSON.parse(this.$route.params.instanceInfo);
   let isObject = this.$route.params.instanceInfo; //获取路由传过来的数据
   //判断数据是否为对象,如果不是,则解析并获取数据
   let data = isObject instanceof Object ? this.$route.params.instanceInfo : JSON.parse(this.$route.params.instanceInfo);
   this.currentProductId = data.uuid;
   this.solutionUuid = data.uuid;
   this.setValue(data)
   localStorage.setItem('SolutionInfo', JSON.stringify(data));
  } else if (localStorage.getItem("SolutionInfo")) {//在浏览器的本地存储中获取数据
   //一般数据在浏览器的本地存储中会以JOSN字符串的方式存储,所以要把数据转换成JSON对象来使用
   let data = JSON.parse(localStorage.getItem("SolutionInfo"));
   this.currentProductId = data.uuid;
   this.solutionUuid = data.uuid;
   this.setValue(data)
  }

 }
}

3、值监听

页面A:
  //定义要监听的对象
  <vm-register-table :param="param" :child-open-table="jumpOrDialog" />

  例如监听param:
  (1).若param为对象,则需要把它转换成JSON字符串
  let tenantParam = {
    tenantId:tenantId,
    isTerminals: this.jumpOrDialog.isTerminals
  }
  this.param = JSON.stringify(tenantParam);
  (2).若param为字符串,则不用做任何转换
  this.param = currentPage;

页面B:
  //1.注册监听对象
  props: ['childOpenTable','param'],
  
  //2.监听
  (1).
  watch:{
    param:function(oldValue){
      console.log("newValue++"+oldValue)
      let jumpOrDialog = JSON.parse(oldValue)
      console.log("jumpOrDialog==++"+jumpOrDialog)
      let isTerminal = jumpOrDialog.isTerminals 
      if(isTerminal){
        this.tenantId = jumpOrDialog.tenantId;
      }else{
        let userInfo = JSON.parse(localStorage.getItem("userInfo"))
        this.tenantId = userInfo.tenantId;
      }
      let vmData = {
        tenantId: this.tenantId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.getAllVmRegister(vmData); 
    }
  },  
  (2).
  watch:{
     param:function(oldValue){
       let pages = JSON.parse(oldValue)
       this.currentPage = pages;
     }
   }

以上这篇vue实现路由监听和参数监听就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
js实现简易聊天对话框
Aug 17 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
微信小程序实现弹框效果
May 26 Javascript
基于axios 的responseType类型的设置方法
Oct 29 #Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 #Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 #Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 #Javascript
javascript实现简单打字游戏
Oct 29 #Javascript
简单使用webpack打包文件的实现
Oct 29 #Javascript
vue 解决异步数据更新问题
Oct 29 #Javascript
You might like
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP数组相关函数汇总
2015/03/24 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
javascript中的几个运算符
2007/06/29 Javascript
js 判断 enter 事件
2009/02/12 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
pycham查看程序执行的时间方法
2018/11/29 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
女子职高个人自荐书
2014/02/01 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
学校就业推荐信范文
2014/05/19 职场文书
五心教育心得体会
2014/09/04 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
公司出差管理制度范本
2015/08/05 职场文书
初中语文教师研修日志
2015/11/13 职场文书