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. 参数名称冲突：在路由配置中，如果多个路由使用了相同的参数名称，可能会引起冲突。可以通过使用不同的参数名称或嵌套路由来解决。
2. 参数类型：在传递参数时，确保参数类型正确，否则可能会在获取参数时出现错误。
3. 参数验证：在实际项目中，可能需要对传递的参数进行验证，以确保数据的正确性。
希望以上内容能帮助您更好地理解vue-router中传递参数的方法。如有其他问题，请随时提问。
写在前面：
传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。
Vue router如何传参
params、query是什么？
params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。
路由界面：
router.js:
路由设置这里，当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
注意：如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的http请求或者其他操作就会失败。
注意看上面的路由参数，id这个参数是我们有设置在路由上面的，id2我没有设置在路由里面，所以刷新之后id2就不见了，在项目中，我们总不可能要求用户不能刷新吧。
组件1：
<template> <div class="app_page"> <h1>从这个路由传参到别的路由</h1> <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" > router-link跳转router1 </router-link> </div> </template> <script> export default { name: 'app_page', data () { return { status:110, status2:120, status3:119 } }, } </script>
编程式导航跳转：
上面的router-link传参，也可以使用router文档里面的编程式导航来跳转传参。
this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}); //编程跳转写在一个函数里面，通过click等方法来触发
这两种传参效果是一模一样的，编程式导航，可以用来做判断跳转，比如是否授权，是否登录，等等状态，对此不太了解的小伙伴们，可以跳过这个编程式导航，以后再来看。
组件2：
<template> <div class="router1"> <h1>接收参数的路由</h1> <h1> params.id：{{ $route.params }}</h1> <h1>query.status:{{ $route.query.queryId }}</h1> <keep-alive> <router-view></router-view> </keep-alive> </div> </template>
传参还是比较简单的，按着上面组件的使用方法就可以成功传过去了。
提示：获取路由上面的参数，用的是$route，后面没有r。
params传参和query传参有什么区别：
1、params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
比如：跳转/router1/:id
<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link> <router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>
2、params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况，这一点的在上面说过了
作者原话：首先我针对刷新参数消失想到的方法是在刚开始的时候将参数存到localStorage里面，但是如果这种传参比较多的话可能存储的地方会有点多；
然后再看一些博客的时候提到用vue 的<keep-alive>，即在<router-view>外套一层<keep-alive>实现页面缓存，但是这样确实是不是每一个页面都需要缓存的特别是一些状态之间切换需要流程化更改状态的页面，写上这个就不能实现数据的实时刷新了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
本文共计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. 参数名称冲突：在路由配置中，如果多个路由使用了相同的参数名称，可能会引起冲突。可以通过使用不同的参数名称或嵌套路由来解决。
2. 参数类型：在传递参数时，确保参数类型正确，否则可能会在获取参数时出现错误。
3. 参数验证：在实际项目中，可能需要对传递的参数进行验证，以确保数据的正确性。
希望以上内容能帮助您更好地理解vue-router中传递参数的方法。如有其他问题，请随时提问。
写在前面：
传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。
Vue router如何传参
params、query是什么？
params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。
路由界面：
router.js:
路由设置这里，当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
注意：如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的http请求或者其他操作就会失败。
注意看上面的路由参数，id这个参数是我们有设置在路由上面的，id2我没有设置在路由里面，所以刷新之后id2就不见了，在项目中，我们总不可能要求用户不能刷新吧。
组件1：
<template> <div class="app_page"> <h1>从这个路由传参到别的路由</h1> <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" > router-link跳转router1 </router-link> </div> </template> <script> export default { name: 'app_page', data () { return { status:110, status2:120, status3:119 } }, } </script>
编程式导航跳转：
上面的router-link传参，也可以使用router文档里面的编程式导航来跳转传参。
this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}); //编程跳转写在一个函数里面，通过click等方法来触发
这两种传参效果是一模一样的，编程式导航，可以用来做判断跳转，比如是否授权，是否登录，等等状态，对此不太了解的小伙伴们，可以跳过这个编程式导航，以后再来看。
组件2：
<template> <div class="router1"> <h1>接收参数的路由</h1> <h1> params.id：{{ $route.params }}</h1> <h1>query.status:{{ $route.query.queryId }}</h1> <keep-alive> <router-view></router-view> </keep-alive> </div> </template>
传参还是比较简单的，按着上面组件的使用方法就可以成功传过去了。
提示：获取路由上面的参数，用的是$route，后面没有r。
params传参和query传参有什么区别：
1、params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
比如：跳转/router1/:id
<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link> <router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>
2、params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况，这一点的在上面说过了
作者原话：首先我针对刷新参数消失想到的方法是在刚开始的时候将参数存到localStorage里面，但是如果这种传参比较多的话可能存储的地方会有点多；
然后再看一些博客的时候提到用vue 的<keep-alive>，即在<router-view>外套一层<keep-alive>实现页面缓存，但是这样确实是不是每一个页面都需要缓存的特别是一些状态之间切换需要流程化更改状态的页面，写上这个就不能实现数据的实时刷新了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。