Vue中的路由参数

路由参数与接收参数注意：在路由配置文件中，需要为组件定义路由，才能在浏览器中输入地址访问页面；如果要传递参数和获取参数，必须有如下路由配置{path:'/组件路由名称/:参数名称',组件：组件名称}向组件中的路由传递参数ps:传递参数时，就是this.$router，接收参数是this.$route`1.$router是一个VueRouter实例。如果您想导航到不同的URL，请使用$router.push方法。2、$route是当前router的跳转对象，在其中可以获取name、path、query、params等参数：直接在url中输入地址：[/componentroutingname/parameter]在对应的component中,[$route.params.参数名获取】通过$router获取以上参数实现传参

argu{{item}}

实现方案一的路径：methods:{handerItem(name){this.$router.push({path:\`/argu/${name}\`})}}需要对应的路由配置为如下：{path:'/argu/:name',name:'Argu',component:()=>import('@/components/argu')}显然需要在路径中加上/:id来对应$router.push中路径携带的参数。可以在子组件中使用以获取传递的参数值。this.$route.params.id注意事项：配置文件中的参数前不仅要有'/'，还要有':'；但父组件中不需要“：”。方案二：父组件：使用path匹配Route，然后通过query传递参数；在这种情况下，查询传递的参数将显示在url?id=?之后。在父组件中：methods:{handerItem(name){this.$router.push({path:\`/argu\`,query:{name:name}})}}在配置文件中：{path:'/argu',name:'Argu',component:()=>import('@/components/argu')}子组件中：注意点：在父组件this.$router.push中使用路径加查询方式时，不能在路径后加'/配置文件中的:name'需要在子组件中使用$route.query.name获取参数，我们可以在url中获取'?name=parameter'，相当于GET请求name实现方案一：*父组件中：通过路由属性中的name确定匹配的路由，通过params/:name*methods传递参数:{handerItem(name){this.$router.push({name:'Argu',params:{name:name}})}}对应的路由配置：可以加上：/name或者如果不添加，添加的数据会显示在url后面，添加的数据不添加就不会显示：/name:{path:'/argu',name:'argu',component:()=>import('@/components/argu')}页面中：添加：/name:通过路径实现参数handerItem(name){this.$router.push({path:`/argu/${name}\`})}也可以使用：handerItem(name){this.$router.push({path:'/argu',params:{name:name}})}摘要查询相当于一个get请求，当页面跳转，可以在地址栏看到请求参数。params相当于一个post请求，地址栏不会显示参数。补充：当一个组件中有时，会考虑到，在配置路由的时候，这个组件下还有子组件{path:'/singer',component:()=>import('components/singer/singer'),children:[{path:':id',component:()=>import('components/disc/disc')}]}跳转组件：this.$router.push({path:\`/singer/${id}\`,})接受组件：this.$route.params.id