VUE 路由传递参数及获取总结

方法一

动态路由（这里用来测试，传了两个参数username和post_id）

//路由配置
{
  	path: '/user/:username/:post_id',
   	name: 'User',
   	component: User
 }

//跳转
	this.$router.push({
     	 path: `/user/${username}/${post_id}`,
    })

匹配路径：/user/evan/123 
传递的参数：{ username: 'evan', post_id: '123' }  

//获取参数
this.$route.params.username
this.$route.params.post_id

方法二

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

//路由配置
{
  	path: '/user',
   	name: 'User',
   	component: User
 }

//js跳转
	this.$router.push({
     	 name: 'User',
     	 params: {
            id: id
          }
    })

<!--html跳转-->
<router-link :to="{name:'User',params:{id:3}}"><span>跳转</span></router-link>

js获取参数：this.$route.params.id
html获取参数： {{$route.params.id}}

方法三

使用path来匹配路由，然后通过query来传递参数，参数显示在地址栏上，并用?号和&号拼接的

//路由配置
{
  	path: '/user',
   	name: 'User',
   	component: User
 }

//js跳转
	this.$router.push({
     	  path: '/user',
          query: {
            id: id
          }
    })

<!--html跳转-->
<router-link to="/user?id=1"><span>跳转</span></router-link>

js获取参数：this.$route.query.id
html获取参数： {{$route.query.id}}

参数是对象的时候使用params传参
参数是字符串拼接的时候使用query传参

转发：原文地址