Vue路由监听
一、问题描述
描述:页面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();
}
},
我遇到的问题是路由携带页面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路由监听的更多相关文章
- vue路由监听及路由守卫
路由监听: //当一个组件被复用的时候,那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, ...
- vue路由监听和参数监听
1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu" ...
- vue 路由监听
发现网上其实有很多种答案,但是测试之后发现很多都不行,或者写的不完整. 一.在app.vue组件内,增加监听$route,如下: watch: { $route(to, from) { console ...
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- vue的路由带参数和取参数,watch路由监听
1.写在html里 <router-link :to="{path:'/goldShop/goodsInfo',query: { id:item.id }}" class=& ...
- 解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题
问题解答 angular1项目导入ui-router之后,使用路由监听,代码如下 angular.module('app', ['ui.router', 'ui.router.state.events ...
- angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...
- vue时时监听input输入框中 输入内容 写法
Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...
- angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题
壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...
随机推荐
- App.after
解释: App.after可以增加APP级的切面,触发的时机是在所拦截的对应生命周期方法执行之后. 方法参数:Object Object 参数说明: 参数名 类型 必填 默认值 说明 methods ...
- 『转』一千行MySQL学习笔记
/* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...
- (转)基于TLS证书手动部署kubernetes集群(下)
转:https://www.cnblogs.com/wdliu/p/9152347.html 一.master节点组件部署 承接上篇文章--基于TLS证书手动部署kubernetes集群(上),我们已 ...
- 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 ...
- php面试专题---17、MySQL的SQL语句编写考点
php面试专题---17.MySQL的SQL语句编写考点 一.总结 一句话总结: 注意:只写精品 1.MySQL的关联UPDATE语句? 关键UPDATE A,B:UPDATE A,B SET A.c ...
- HTTrack Website Copier 扫描规则
+*.css +*.js -ad.doubleclick.net/* -mime:application/foobar+*.gif +*.jpg +*.jpeg +*.png +*.tif +*.bm ...
- selenium 访问网页抛出ElementNotVisibleException异常
问题描述: 在使用selenium时遇到如下异常导致程序终止: selenium.common.exceptions.ElementNotVisibleException: Message: {&qu ...
- centos7 安装gdal2.3.1
在直接源码安装gdal2.3时报错,大概意思是说没有安装SFCGAL. 1.centos更新cmake到3.5版本: wget https://cmake.org/files/v3.5/cmake-3 ...
- 【GDAL】聊聊GDAL的数据模型(二)——Band对象
在GDAL中栅格数据直接参与各种计算的重要对象是Band 摘录官方描述: Raster Band A raster band is represented in GDAL with the GDALR ...
- 测开之路六十六:UI测试平台之处理逻辑和蓝图添加到程序入口
from selenium import webdriverfrom common import get_case_idfrom common.mongo import Mongo class Log ...