vue路由传参的基本实现方式小结【三种方式】

在Vue.js应用开发中，路由参数传递是实现页面间数据传递的一种重要方式。它允许开发者在路由跳转时传递数据给目标路由组件，从而可以在目标组件内部访问这些数据。本文针对Vue路由传参，总结了三种基本实现方式：params显示传参、params不显示参数以及query显示参数传参。 params传参是一种在URL中显示参数的方式。它需要在路由配置中声明对应的参数名。例如，有一个子路由配置如下： ```javascript { path: '/child/:id', component: Child } ``` 在父组件中，可以使用`router-link`组件的`to`属性通过声明式的方式直接传递参数值： ```html <router-link :to="/child/123">进入Child路由</router-link> ``` 或者在父组件的JavaScript代码中使用编程式导航，传递参数值： ```javascript this.$router.push({ path: '/child/123' }) ``` 在子组件中，可以通过`$route.params.id`来获取传递的参数值。 在params传参的另一种情况，即不显示参数，参数值不会在URL中显示。这种情况下，通常是通过路由的别名（name属性）进行传值。例如： ```javascript this.$router.push({ name: 'Child', params: { id: 123 } }) ``` 这里，在子组件中依然可以使用`$route.params.id`来获取传递的参数值。需要注意的是，使用params不显示URL传参的方式在页面刷新时会导致传递的值丢失。 最后一种方式是query传参，这种方式会在URL中以查询字符串的形式显示参数。路由配置和使用与params方式类似，只不过传递参数的格式有所不同。使用`router-link`组件的`to`属性可以通过声明式的方式传递query参数： ```html <router-link :to="{ name: 'Child', query: { id: 123 } }">进入Child路由</router-link> ``` 在父组件中也可以使用编程式的方式传递query参数： ```javascript this.$router.push({ name: 'Child', query: { id: 123 } }) ``` 在子组件中，可以通过`$route.query.id`来获取传递的参数值。 params传参主要通过路径中的命名参数来传递，而query传参则是通过URL的查询字符串来传递参数。开发者需要根据实际的应用场景和需求选择适合的路由传参方式，并注意在使用params不显示URL传参方式时，页面刷新会导致参数值丢失的问题。在实现过程中，确保路由配置正确，并在目标组件中正确地获取传入的参数。这三种方法各有优劣，适用于不同的场景，了解这些基本实现方式有助于在开发Vue应用时更加高效地进行路由参数管理。