方法一

动态路由(这里用来测试,传了两个参数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传参

Logo

前往低代码交流专区

更多推荐