一、问题描述

描述:页面1showowner.vue跳转到页面2showuser.vue

需求:页面1的多个结点对应于一个页面2文件【页面2未展示】

问题:并不是页面一的一个结点对应一个页面二文件

处理:路由监听

二、代码:

页面一

 handleNodeClick(data) {
console.log(data);
//每次点击结点都要初始化ownerId
this.domId = data.data.domId;
this.ownerId = data.data.ownerId;
this.varify();
this.$router.push({
path: this.pathVariable,
query: {
domId: this.domId,
ownerId: this.ownerId
}
}); }

页面二

watch:{
// ownerId(val,oldVal){
// console.log(val);
// this.getLeft();
// },
$route(to,from){
console.log(to.path);
this.getLeft();
}
},

  methods: {
    //获取左边参数,利用获得的参数从后端取数据
    getLeft() {
      alert(1111);
      // this.domId = this.$route.query.domId;
      // console.log(this.domId);
      // this.ownerId = this.$route.query.ownerId;
      // console.log(this.ownerId);
      this.domId = this.$route.query.domId;
      this.ownerId = this.$route.query.ownerId;
      axios
        .get("/api/queryusers/" + this.domId + "?ownerId=" + this.ownerId, {
          headers: { Validate: "123456" }
        })
        //then获取成功;response成功后的返回值(对象)
        .then(response => {
          // console.log(response);
          // console.log(response.data.data);
          this.tableData = response.data.data;
          // console.log(response.data.data.childList);
          // console.log(this.data1);
        })
        //   获取失败
        .catch(error => {
          console.log(error);
          alert("网络错误,不能访问haha");
        });
    },
}
 

我遇到的问题是路由携带页面1的参数,点击不同结点参数不一样,对应于页面二展示的数据(从后端获取)不一样;

但是页面二是一个vue文件。

watch:{
// ownerId(val,oldVal){
// console.log(val);//val即newVal
// this.getLeft();
// },
},

http://localhost:8080/#/showuser?domId=1&ownerId=1

http://localhost:8080/#/showuser?domId=1&ownerId=4

这段注释掉的代码没有监听到路由的变化,是因为vue认为上面的两种路由的HTTP地址是同一个路由,参数变化并不认为是路由变化,因为归根到底还是同一个showuser.vue故而没有监听到变化,不会重新调用新的this.getLeft();

解决方法:如果我们要在路由发生变化的时候执行方法,那我们就需要监听$route的变化,在它变化的时候执行方法。即

watch:{
$route(to,from){
console.log(to.path);//当前页面path即/showuser
this.getLeft();
}
},

三、另外几种监听路有变化的方法

1.handler;当然,如果我们要通过判断路由发生的特定变化来执行方法,可以使用handler

// 监听,当路由发生变化的时候执行
watch: {
$route: {
handler: function(val, oldVal){
console.log(val);
},
// 深度观察监听
deep: true
}
},
watch:{
"$route":{
handler(route){
const that=this;
if(route.name=='Hello'){
that.fetchData();
}
}
}
}

2.在Vue的官方文档中,直接在监听后传入一个方法对应的字符串,在路由发生变化的时候自动执行方法

// 监听,当路由发生变化的时候执行
watch: {
'$route':'getPath'
},
methods: {
getPath(){
console.log(this.$route.path);
}
}

Vue路由监听的更多相关文章

  1. vue路由监听及路由守卫

    路由监听: //当一个组件被复用的时候,那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, ...

  2. vue路由监听和参数监听

    1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu" ...

  3. vue 路由监听

    发现网上其实有很多种答案,但是测试之后发现很多都不行,或者写的不完整. 一.在app.vue组件内,增加监听$route,如下: watch: { $route(to, from) { console ...

  4. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  5. vue的路由带参数和取参数,watch路由监听

    1.写在html里 <router-link :to="{path:'/goldShop/goodsInfo',query: { id:item.id }}" class=& ...

  6. 解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题

    问题解答 angular1项目导入ui-router之后,使用路由监听,代码如下 angular.module('app', ['ui.router', 'ui.router.state.events ...

  7. angularjs -- 路由监听

    前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...

  8. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  9. angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题

     壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...

随机推荐

  1. App.after

    解释: App.after可以增加APP级的切面,触发的时机是在所拦截的对应生命周期方法执行之后. 方法参数:Object Object 参数说明: 参数名 类型 必填 默认值 说明 methods ...

  2. 『转』一千行MySQL学习笔记

    /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...

  3. (转)基于TLS证书手动部署kubernetes集群(下)

    转:https://www.cnblogs.com/wdliu/p/9152347.html 一.master节点组件部署 承接上篇文章--基于TLS证书手动部署kubernetes集群(上),我们已 ...

  4. php mysql-pdo,fpm,csrf-forward-money,php7.1 in centos7

    centos7--php7.1http://zixuephp.net/article-207.htmlhttps://www.cnblogs.com/liansng/p/7680930.html ph ...

  5. php面试专题---17、MySQL的SQL语句编写考点

    php面试专题---17.MySQL的SQL语句编写考点 一.总结 一句话总结: 注意:只写精品 1.MySQL的关联UPDATE语句? 关键UPDATE A,B:UPDATE A,B SET A.c ...

  6. HTTrack Website Copier 扫描规则

    +*.css +*.js -ad.doubleclick.net/* -mime:application/foobar+*.gif +*.jpg +*.jpeg +*.png +*.tif +*.bm ...

  7. selenium 访问网页抛出ElementNotVisibleException异常

    问题描述: 在使用selenium时遇到如下异常导致程序终止: selenium.common.exceptions.ElementNotVisibleException: Message: {&qu ...

  8. centos7 安装gdal2.3.1

    在直接源码安装gdal2.3时报错,大概意思是说没有安装SFCGAL. 1.centos更新cmake到3.5版本: wget https://cmake.org/files/v3.5/cmake-3 ...

  9. 【GDAL】聊聊GDAL的数据模型(二)——Band对象

    在GDAL中栅格数据直接参与各种计算的重要对象是Band 摘录官方描述: Raster Band A raster band is represented in GDAL with the GDALR ...

  10. 测开之路六十六:UI测试平台之处理逻辑和蓝图添加到程序入口

    from selenium import webdriverfrom common import get_case_idfrom common.mongo import Mongo class Log ...