路由参数传递

传递参数主要有两种类型:params及query

params的类型:

1.配置路由格式:/router/:id
2.传递方式:在path后面跟上对应的值
3.传递后形成的路径:/router/123 /router/abc

<router-link :to="{name:'profile',params:{id:1}}">档案</router-link>
使用代码的方式:
this.$router.push({name:'profile',params: {id:1}})

注意:在添加params对象时,必须搭配使用name(此时不用在router下index.js中对应路由的path内配置'/:参数'),而不能使用path,否则在接收参数时无法接收到参数值;如果一定要使用path,则无需使用params,即使添加params对象也没有效果,直接在path在后面以'/参数'的形式添加参数,同时在router下index.js中对应path后添加'/:参数'即可
接收参数时使用$route.params

query类型

1.配置路由格式:/router,即普通配置
2.传递方式:对象中使用query的key作为传递方式
3.传递后形成的路径:/router?id=123,/router?id=abc

<router-link :to="{path:'/user',query:{id:'1'}}">档案</router-link>
使用代码的方式:
this.$router.push({name:'user',query: {id:'aaa'}})

使用query参数时,使用name或者path均可
接收参数时使用$route.query

猜你喜欢

转载自www.cnblogs.com/kanaliya/p/12340829.html