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();
}
}