Vue用router.push（传参）跳转页面，参数改变，跳转页面数据不刷新的解决办法

this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。

this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。

 

关于 push() 方法：

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

push() 方法的调用：
 

    //字符串
    this.$router.push('home')
 
    //对象
    this.$router.push({path:'home'})
 
    //命名的路由
    this.$router.push({name:'user', params:{userId: '123'}})
 
    //带查询参数，变成 /register?plan=private
    this.$router.push({path:'register', query:{plan:private}})

  注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

    const userId = '123';
 
    this.$router.push({path:`/user/${userId}`});  //->/user/123
 
    this.$router.push({name:'user', params:{userId}});  //->/user/123
 
    //这里的 params 不生效
    this.$router.push({path:'/user', params:{userId}});  //->/user

总结：

params 传参，push 里面只能是 name:'xxx'，不能是 path:'/xxx'，因为 params 只能用 name 来引入路由，如果这里写成了 path ，接收参数页面会是 undefined。

1、手写完整的 path:
 
    this.$router.push({path: `/user/${userId}`});
 
    获取参数：this.$route.params.userId
 
2、用 params 传递：
 
    this.$router.push({name:'user', params:{userId: '123'}});
 
    获取参数：this.$route.params.userId
 
    url 形式：url 不带参数，http:localhost:8080/#/user
 
3、用 query 传递：
 
    this.$router.push({path:'/user', query:{userId: '123'}});
 
    获取参数：this.$route.query.userId
 
    url 形式：url 带参数，http:localhost:8080/#/user?userId=123

Vue用router.push（传参）跳转页面，参数改变，跳转页面数据不刷新的解决办法：

// go方式   再跳转后的路由观察路由变化，进行页面刷新。 全局作用

watch: {    

    '$route' (to, from) {   

         this.$router.go(0);   

 }}


//  局部处理方式
watch: {
	  '$route' (to, from) { //监听路由是否变化
		  if(to.query.id != from.query.id){
			  this.id = to.query.id;
			  this.init();//重新加载数据
		  }
	  }
},
created() {
	if(this.$route.query) {
		this.id = this.$route.query.id;
		this.init();
	}
}