在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果。
举例:当前路由为 /pjthome?pjtid=123456
我们可以通过如下形式获取路由参数
mounted: function () {
this.pjtid = this.$route.query.pjtid
this.pjtdetail()
},
在页面pjtdetail()方法中,需要用到pjtid这个参数,假如在同一页面有相似项目切换,只是pjtid发生变化,在切换时,并未重新加载数据,原因是跟vue的生命周期有关,具体该解决这个问题,添加路由监听即可。
watch: {
$route(){
this.pjtid = this.$route.query.pjtid
},
pjtid() {
this.pjtdetail()
},
}
补充:vue路由设置路由参数有2种方式:
1.通过query配置:
<router-link :to="{ name:'login',query:{id:1} }">登录</router-link>
通过query配置的路径显示如下:
2.通过params配置:
<router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>
通过query配置的路径显示如下:
通过该方法配置的参数,需要在配置路由的时候给参数留个坑,如下图:
获取路由参数的方法:
1.通过query配置的:
this.$route.query
2.通过params配置的:
this.$route.params