路由参数传递

Posted 2021-03-08 kanaliya

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

params的类型：

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

使用router-link:

<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:

<router-link :to="{path:'/user',query:{id:'1'}}">档案</router-link>

使用代码的方式：

this.$router.push({name:'user',query: {id:'aaa'}})

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