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 相关文章推荐
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
JS实现简易日历效果
Jan 25 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
PHP图片上传类带图片显示
2006/11/25 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python使用正则筛选信用卡
2019/01/27 Python
python简单实现AES加密和解密
2019/03/28 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
校园招聘策划书
2014/01/09 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
火车的故事教学反思
2014/02/11 职场文书
学习经验演讲稿
2014/05/10 职场文书
信访工作经验交流材料
2014/05/23 职场文书
住房租房协议书
2014/08/20 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
MongoDB 常用的crud操作语句
2021/06/20 MongoDB