url 参数传递的两种方式_7.4 vue-router的几种实例方法以及参数传递，push,replace,go。...-CSDN博客

问题一：vue-router的几种实例方法以及参数传递

实例方法：

this.$router.push(location, onComplete?, onAbort?)这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。并且点击等同于调用 router.push(...)。

this.$router.replace(location, onComplete?, onAbort?)这个方法不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录，所以，当用户点击浏览器后退按钮时，并不会回到之前的 URL。

this.$router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

注意：

1、在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

2、如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

参数传递方式：

vue-router提供了params、query、meta三种页面间传递参数的方式。

示例：

// 字符串，不带参数this.$router.push('home')// 对象，不带参数this.$router.push({ path: 'home' })// params(推荐)：命名的路由，params 必须和 name 搭配使用this.$router.push({ name:'user',params: { userId: 123 }})// 这里的 params 不生效this.$router.push({ path:'/user',params: { userId: 123 }})// query：带查询参数，变成 /register?plan=privatethis.$router.push({ path: 'register', query: { plan: 'private' }})//meta方式：路由元信息export default new Router({ routes: [ { path: '/user', name: 'user', component: user, meta:{ title:'个人中心' } } ]})

编辑器查阅：

在组件中使用：

//通过 $route 对象获取，注意是route，么有rthis.$route.paramsthis.$route.querythis.$route.meta

问题二： $route 和 $router 的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。