Vue Router带参数页面刷新或回退参数消失怎么办？

本文共计1584个文字，预计阅读时间需要7分钟。

在Vue.js项目中，`vue-router`是用于页面路由管理的库。以下是对传递参数的简单介绍：

写在前面：参数是前端经常需要用到的操作，很多场景下都需要在页面间传递数据。本文将详细介绍如何在vue-router中传递参数，并解决一些常见问题。

传递参数的方式：

1. 路由配置：在路由配置中，可以通过`name`属性给路由起一个名字，然后在``标签中使用`name`属性来传递参数。

跳转到用户详情

2. 路由路径：在路由路径中使用冒号表示参数。

跳转到用户详情

获取参数：

1. `$route.params`：在组件的`created`、`mounted`等生命周期钩子中，可以通过`this.$route.params`来获取传递的参数。

javascriptexport default { created() { const userId=this.$route.params.userId; console.log(userId); // 输出：123 }}

2. `this.$route.query`：如果使用查询字符串传递参数，可以通过`this.$route.query`来获取。

跳转到用户详情

javascriptexport default { created() { const userId=this.$route.query.userId; console.log(userId); // 输出：123 }}

常见问题：

1. 参数名称冲突：在路由配置中，如果多个路由使用了相同的参数名称，可能会引起冲突。可以通过使用不同的参数名称或嵌套路由来解决。