vue路由query和params的几种传参方式
在项目中需要路由传参，查看了官方文档以及参考了网上其他资料，现总结如下：
一/ params传参
占位符:id
//声明式
//编程式
skipMethod (name) {this.$router.push(`/home/${name}`);//或者this.$router.push({path: `/home/${name}`})
}
路由配置：
{path; '/home/:id',name: 'home',component: Home}
子组件中获取：
this.$route.params.id; //注意是$route
根据官方文档的说明，我觉得:id 的作用主要是利用props将组件和路由解耦，我通俗的说一下：一个组件可能是一个路由指向它，也有可能只是作为普通的子组件（不是路由），如果使用该组件都要向其传递name参数，如果用this.$route.params.name;接收参数，那么作为普通的子组件怎么接收参数，所以最好不管怎么用该组件，该组件都要用props接收参数，下面主要说路由如何用props
路由配置：
routes: [{ path: '/', component: Hello }, // No props, no nothing{ path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props{ path: '/static', component: Hello, props: { name: 'world' }}, // static values{ path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props]
父组件：
<ul><li><router-link to="/">/</router-link></li><li><router-link to="/hello/you">/hello/you</router-link></li><li><router-link to="/static">/static</router-link></li><li><router-link to="/dynamic/1">/dynamic/1</router-link></li><li><router-link to="/attrs">/attrs</router-link></li></ul>
子组件：
export default {props: {..........}}
此外，相同路由跳转只是后面跟的数据不一样，也是用这种方式传参（动态路由）
params对象
//声明式
//编程式
skipMethod (name) {this.$router.push({name: 'home',params: {name: name}})
}
路由配置：
{path; '/home',name: 'home',component: Home}
接收：
this.$route.params.name;
注意：params只能用name来引入路由
二/ query传参
//声明式<router-link :to="'/home?name=' + name">//或者<router-link :to="{path: '/home', query: {name: name}}">//编程式skipMethod (name) {this.$router.push({path: '/home',query: {name: name}})}
路由配置：
{path; '/home',name: 'home',component: Home}
子组件接收：
this.$route.query.name
柔情只为你懂
野性酷女
雨点打透心脏的1/2处
淩亂°似流年
分手后的思念是犯贱
我就是我
还没有评论，来说两句吧...