路由跳转前后,this.$route值

路由配置:

{

path: "/MatchingInfQT",

component: MatchingInfQT,

meta: {

newOne:false,

}

},

路由(代码处)跳转代码前后,打印this.$route(页面跳转前,改变MatchingInfQT路由的meta值)

console.log(1,this.$route)

this.$router.push('/MatchingInfQT');

this.$route.meta.newOne = true;

console.log(2,this.$route)

 

分别输出:

路由跳转前后,this.$route值_第1张图片

 

总结:

1、写在$route.push前面,获取到的是当前页面路由参数

2、写在$route.push 后面 ,获取到的是跳转(到)页面的路由参数

 

如果想改变此页面meta的值,可以用watch监听路由,

watch: {

'$route' (to, from) {

if (from.path === '/MatchingInfQT') {

from.meta.newOne = false;

}

if (to.path === '/MatchingInfQT' && this.$route.meta.newOne) {

//do something

}

}

},

 

 从当前页面离开,将newOne的值 重置为false,由某一页面跳进来的时候(如图2),设置为true。

作用:可以再此页面(MatchingInfQT)特殊处理某一页面的特数要求

PS:

  •       path + query: 跳转页面后,刷新(跳转后页面),路由传的参数依旧在(可以获取到);
  •       name + params : 跳转页面后,刷新(跳转后页面), 路由传的参数获取不到(为 undefined);

你可能感兴趣的:(html,javascript,vue路由)