vue-router 的三种传参和获取参数方式

1. 第一种传参方式：

路由定义{path:"/home/:id",component:...} ;

声明式导航：<router-link to="/home/1024"></router-link>,

编程式导航：this.$router.push("/home/1024");

路由获取参数：const id = this.$route.params.id

注意：这个声明式导航或者编程式导航的对象写法，必须写路由的具体名字name配置，不能直接写路由path配置

2. 第二种传参方式：

路由定义{path:"/home",component:...} ;

声明式导航：<router-link :to="{path:"/home",params:{id:1024}}"></router-link>,

编程式导航：this.$router.push({path:"/home",params:{id:1024}});

路由获取参数：const id = this.$route.params.id

3. 第三种传参方式：

路由定义{path:"/home",component:...} ;

声明式导航：<router-link to="/home?id=1024"></router-link>或者<router-link :to="{path:"/home",query:{id:1024}}"></router-link>,

编程式导航：this.$router.push("/home?id=1024");

路由获取参数：const id = this.$route.query.id