vue-router的传参与取参汇总

一. params方法

1.通过router-link传参与params取参

通过path中设置：id，目的是以后会往/foo后面添加一个id值，如/foo/id
例：
const router = new VueRouter({
				routes: [
					{	
						path:'/foo/:id',
						component:Foo
					}
				]
	})


<router-link to="/foo/5">foo</router-link>
<router-view/>


var Foo = {
			template: '<div>Foo路由{{$route.params}}</div>',
		}


这样就可以通过$route.params取得一个存有id的对象
如：（注意红色标记）

这样通过$route.params.id就可以获取<router-link to="/foo/5">foo</router-link>
中的id：5，当然也可以传更多的值，如name值

<router-link to="/foo/5/tom">foo</router-link>

routes: [
	{	
		path:'/foo/:id/:name',
		component:Foo
	}
		]

2.通过编程式路由传参与params取参

通过编程式路由，其实我们使用的时候内部就是调用编程式路由。
编程式路由可以用在js代码里面，如this.$router.push(‘/foo’)
例:

那么该如何传参和取参呢？
一种方式是和router-link一样，不同的是在push里面匹配路径，
如：

另一种方式是通过路由规则的name值，首先得在设置路由规则的name值如：

再调用this.$router.push，其实调用this.$router.push(‘/foo’)就是调用
this.$router.push({
path:’/foo’
})
在这个对象里面还有另外的参数，如params对象，看到这里应该就懂了，可以往params对象里面添加参数：

这时再调用$route.params就可以获取params对象的值
如：（注意红色标记）

你会发现url路径与上面两种方式不同,没有了id和name值，类似我们表单传值的post方法。
使用name值的方式连在路由规则里面预先填入值都不用了，直接可以使用

当然，如果怕会混乱，要预先填入也是可以的，如

那么有人会问，可不可以直接通过path加params的方式传参呢？答案是不行，官方文档也说了

我们也可以来测试下：

结果：

取不到$route.params的值,可能有人会说，可能得在路由规则里面预先填入id和name的值，这样才能取到？
但是这样连路由都进不去，因为根本匹配不到这样的路由，我们是通过path的方式，path其实就是跳转对应的url路径，而这个路径根本匹配不了路由规则里面的格式
如

所以就进不了路由

总结：
通过params取参有两种方式，一种是先在路由规则里面预留需要传进的参数，
如何通过<router-link> 或者编程时路由传参，需补全path的值，
如id或者name第二种是通过设置路由规则的name值，
这时就不用再预留参数了（要预留也可以，见上文）
只需通过编程时路由的params对象传入对应参数的键值对即可

二.query方法

query方法获取参数就相对简单了，直接通过在url里面?id=1&name=tom,再通过$route.query即可获取id和name值

1.通过router-link传参与query取参

这种方式无需在路由规则里面预留参数

2.通过编程时路由传参与query取参

在这再补充一点关于编程时路由与普通<router-link to=””>的知识点：
其实两者基本是一样的，你可以在router-link中的to属性中加入name值或者params对象,不过需要用v-bind绑定如：

<router-link  v-bind:to="{ name: ‘foo’, params: {id: 1 }}">foo</router-link>

这跟代码调用 router.push() 是一回事：

$router.push({ name: ‘foo’, params: { id: 1 }})

官网文档地址：https://router.vuejs.org/zh/