vue-router传参攻略：刷新不丢失的正确姿势

"详解新手使用vue-router传参时注意事项，主要介绍了通过name和params以及path和query两种方式在vue-router中传递参数，并提到了参数丢失和类型转换的问题及解决方案。" 在Vue.js应用中，vue-router是官方推荐的路由管理器，它允许我们在组件之间进行导航并传递数据。本文主要针对新手在使用vue-router传参时需要注意的一些关键点进行了详尽解释。 1. **使用name和params组合传参** 这种方式适用于动态路径且需要在URL中不显示参数值的情况。例如，在`this.$router.push`中，我们通过`name`属性指定目标路由的名字，然后通过`params`对象传递参数。在路由配置中，需要定义对应的`name`和`path`。例如： ```javascript this.$router.push({name: 'details', params: {'id': 233}}) ``` 路由配置： ```javascript export default new Router({ mode: 'history', routes: [ { path: '/details/:id', name: 'details', component: () => import('../components/details') } ] }) ``` 可以通过`this.$route.params`获取参数，但需要注意的是，刷新页面后，`params`中的参数将会丢失。对于数字类型的参数，刷新后会变为字符串，因此建议在使用前进行类型检查和转换。 2. **使用path和query组合传参** 当需要在URL中显式看到参数，或者参数可以公开时，可以选择这种方式。通过`path`属性指定目标路由的路径，通过`query`对象传递参数。例如： ```javascript this.$router.push({path: '/details', query: {id: 666}}) ``` 这样，URL会显示为`/details?id=666`。即使刷新页面，`query`参数也不会丢失，可以通过`this.$route.query`来访问。这种方式更适合用于非敏感信息的传递。 3. **参数丢失解决方案** 当使用`params`传参并遇到刷新后参数丢失的问题时，需要在路由配置中明确声明动态参数，如示例中的`:id`。这样，刷新页面后，URL中的`/details/:id`会保留参数值，可以通过`this.$route.params`获取。 4. **参数类型转换问题** 刷新页面后，`params`中的数字参数会被解析为字符串。为了避免类型错误，可以在访问这些参数时进行类型转换，例如： ```javascript const id = Number(this.$route.params.id); ``` 这样可以确保即使参数被解析为字符串，也能正确转换回预期的数字类型。 5. **选择合适的传参方式** 根据项目需求和数据敏感性选择合适的方法。`params`适合隐藏参数，而`query`适合显示参数且需在刷新后保持的数据。 理解和熟练运用vue-router的这两种传参方式对于构建Vue应用至关重要。在实际开发中，要根据具体情况选择合适的传参策略，并注意参数的保存和类型处理，以确保应用的正常运行。查阅官方文档（[vue-router](vue-router)）可以帮助深入理解并解决更多关于路由管理的问题。