解决vue 路由传参 页面刷新或者后退参数丢失的问题

最新推荐文章于 2024-08-12 16:28:02 发布
原创 最新推荐文章于 2024-08-12 16:28:02 发布 · 3.5k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了在Vue中使用query和params两种方式传递参数的区别。使用query传递参数时，即使页面刷新，数据也不会丢失，适合公开参数。而params传递参数则类似post请求，参数不会显示在地址栏中，适合传递敏感信息。

 

vue路由传递参数如果用params传递参数，那么页面刷新就会丢失数据，可以改用query来传递参数，这样刷新就不会丢失

this.$router.push({path: '/business/bizInspectionTaskSub', query: {flag: '2', data: JSON.stringify(r.data.data)}})


如果传递的是对象，注意要把对象转为字符串，否则刷新就会变为undefined了

接收页面：

if (this.flag === '2') {
  const data = JSON.parse(this.$route.query.data)

}

 

另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）
🏆 前端领域优质创作者
03-23 5514
前言 例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。 我们要的是，无论怎么刷新目标页面， 都不会出现获取不到的情况，如下图所示： 解决方案 如果通过query的方式传递对象或数组，在地址栏中会被强制转换成[objectObject]，所以获取不到。 但您可以通过将对象参数，通过JSON.stringify()方法进行转换， 在接收页（目标页）使用JSON.parse()再转回来。 //列表页 constdata={type:'a1
Vue 解决浏览器刷新路由参数丢失问题 全局统一配置无需修改组件
朝花夕拾的博客
12-31 842
在路由跳转的时候，我们经常会传一些参数过去，然后通过传过来的参数调用接口获取相关数据，但是刷新浏览器的时候路由参数会丢失。此时页面报错误了，如何通过全局配置的方式，不需要修改任何组件 实现刷新浏览器保存参数？此时刷新浏览器会保留当前参数~完美解决 无需修改任何组件。首先在router/index.js里添加参数管理器。通过路由全局守卫方法来吧路由参数进行监听存储和清除。
Vue路由传参当传参后刷新导致参数消失问题处理
typhoonpython的博客
04-28 2376
在实际项目中使用字符串拼接，使用iframe跳转链接进行报表展示。 路由传参的时候出现刷新参数丢失问题，具体解决如下： 在进行路由配置的时候使用如下设置进行的配置，用的params方法进行参数传递。 { path: 'data-detail-edit/:type', component: () => import('@/views/cost/costDetail/index'), name: 'test1' params: { type: 1 }, me
vue多个页面路由传参,浏览器回退,页面判断由前一个页面跳转就使用新数据还是其他页面就使用缓存，钩子函数
weixin_45498171的博客
03-25 1491
1.在App.vue里面使用keep-alive <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件，比如 page1,page2 --> </router-view> </keep-alive> <router...
vue3 路由带传参跳转；刷新后消失。一次性参数使用。
qq_43780814的博客
08-12 1200
业务逻辑： 完成对应操作后（点击按钮）返回指定页面（recruit/enterprise/position页面）router.replace替换又会导致显示内容为router.replace后的，传参目的丢失。想要跳转后根据参数显示对应的tab，但url传参刷新会持续保留无法重置。vue3怎么做到路由跳转传参 刷新后消失。解决路由跳转传参去除问题。
vue 路由跳转方式；刷新页面后 params 参数的丢失问题
UserGuan的博客
12-13 6629
/ 跳转到指定 url 路径，并向 history 栈中添加一个记录，点击后退会返回到上一个页面// 跳转到指定 url 路径，但是 history 栈中不会有记录，点击返回会跳转到上上个页面(相当于直接替换了当前页面)// 向前或者向后跳转 n 个页面，n 可为正整数或负整数。
vue 路由传参及解决动态路由传参刷新会消失问题
^_^
08-13 5201
vue传参大致分为路由传参（？拼接传参）和动态路由传参 一、动态路由传参 定义路由 const routes = [ { path: '/first', name:'first', component:()=>import( '../components/first.vue' ) // component:first }, { path: '/second', name:'second', component:()=&
vue router带参数页面刷新或回退参数消失的解决方法
10-17
在使用Vue Router进行页面间传递参数时，经常会遇到参数在页面刷新或者浏览器后退时消失的问题。本文将详细介绍如何在Vue Router中带参数进行页面跳转，并解决刷新或回退时参数消失的问题。 首先，了解在Vue Router...
vue路由、传参、接收方式、跳转、router、path、name、router-link、to、replace、push、query、params
st646889325的博客
07-04 942
htmlname，path都行，建议用name。注意：router-link中链接如果是斜杠/开始，那么就是从根路由开始，如果开始不带斜杠/，则从当前路由开始。</</query传参数类似于get请求，url后面会显示参数，可以不配置路由。params传参数类似于post请求，路由配置path:"/home/:id"或者path:“/home:id”。不配置path，第一次可请求，刷新页面id会消失，配置path，刷新页面id会保留。</</取参。
vue路由传参方式及解决传参刷新页面参数丢失问题
mm
09-19 2397
1、当使用params传参时，刷新页面会导致参数丢失： onRouter() { this.$router.push({ name: 'Index', params: { mm: '0000' } }) }, 接受页面： mounted(){ console.log(this.$route.params.mm) }, 此种传参方式参数...
分享一个利用vue-router以及sessionStorage解决表格中路由跳转时页面刷新导致params参数消失的解决方案
DLRlike的博客
03-18 542
【代码】分享一个利用vue-router以及sessionStorage解决表格中路由跳转时页面刷新导致params参数消失的解决方案。
vue刷新页面带来的参数丢失
Zhoulizhen_的博客
05-10 2754
从商品列表进入商品详情，如图所示： 详情页的请求需要给后台传递一个参数，所以我要把商品的skuId传到详情页面： this.$router.push({name: 'commodityDetail',params:{productId}}) 在详情页面我通过 this.$route.params.productId 取到了skuId，但是当我在详情页面刷新一下的话，...
vue params传参刷新网页数据丢失解决方法
muzidigbig的博客
07-28 3827
上面没用到localStorage是因为如果用户跳转到页面A后，直接关闭浏览器，再打开浏览器输入网址，就能从本地存储找到该数据，但是。存储在localStorage里的数据如果不是主动去清除的话，就算浏览器关闭了，下次打开浏览器他还是会存在。上面的做法虽然满足了刷新网页数据不丢失，但是没满足第二个条件，数据出现在url地址里了。，这样虽然可以让数据不出现在url地址里，但是刷新网页会导致数据丢失。传参时，由于数据是拼接在url地址后面的，所以刷新网页不会导致数据丢失。传参，数据不会出现在url地址里。
vue3 关于使用vuex做状态管理，页面刷新后数据丢失解决办法
weixin_46466247的博客
05-21 3606
数据丢失原因 使用vuex通常会遇到页面刷新后数据丢失的问题。原因是页面刷新后浏览器会重新加载页面相关的组件，vuex的存储的状态当然也会被初始化，所以就造成了数据丢失。也就是vuex并不能做数据的持久化存储，只是在内存中创建个临时仓库。 解决方式 使用其他存储方式 Cookiess 可以将数据存储在Cookies中，但是Cookies大小被限制（各浏览器限制大小可能不同），不适合存储大数据。 LocalStorage 本地存储，直接将数据存到硬盘。不手动删除不会被清理。 SessionStorage 会
vue-router back 返回时携带参数
weixin_39729729的博客
09-08 8484
params 的应用 返回前的页面设置参数 this.$route.params.a = 'a'; this.$route.params.b = 'b'; 返回的目标页面获取参数 beforeRouteEnter(to, from, next) { const { a, b} = from.params; // 'a' 'b' // 此处无法直接设置 this.a this.b next(); } created() { aFoo() { this.$route.params.a
Vue3页面reload刷新后导致缓存页面数据丢失
trabecula_hj的博客
10-26 2124
如何解决reload刷新页面导致缓存页数据丢失的问题
vue router带参数页面刷新或者回退参数消失的解决方法
weixin_40314969的博客
07-27 9160
写在前面： 传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 Vue router如何传参 params、query是什么？ params：/router1/:id ，/router1/123，/router1/789...
vue路由导航问题（页面回显清空数据）
Escaper的博客
01-06 1410
名词解释 created：在数据渲染之前执行，类似页面加载初始化 watch：监听事件 created，只要加载页面就会执行，只执行一次，多次路由跳转也只执行一次，导致复用同一页面的时候，页面数据同样会被渲染过去。 例如：有个添加用户和修改用户的功能，同时使用添加用户这个页面，修改用户的话需要做数据的回显，从而导致点击修改后再次点击添加，添加页面还是会显示之前修改页面渲染上的数据 问题：我不需要在添加用户的界面看见之前的数据，但是由于created只执行一次，没有办法在里面对数据进行清空 解决：添加一个wa
vue3 返回上一个页面如何传参
最新发布
07-05
<think>我们正在处理一个关于Vue3的问题：用户想要在Vue3中实现导航返回并传递参数。 根据提供的引用，特别是引用[3]中提到了Vue Router的导航守卫，我们可以利用Vue Router来实现这个功能。 在Vue Router中，我们可以使用路由对象来传递参数。当我们返回上一个页面时，我们可以通过路由的查询参数(query parameters)或状态(state)来传递参数。 方法1：使用查询参数(query parameters) - 在返回上一个页面时，我们可以使用`router.push`或`router.replace`来添加查询参数，然后在上一个页面中通过`route.query`来获取。 方法2：使用路由的state - Vue Router 4（Vue3的版本）支持在导航时传递状态，这些状态不会出现在URL中，可以通过`route.meta`或通过`history.state`来访问。 但是，用户要求的是“返回上一个页面”并传递参数。返回操作通常是使用`router.go(-1)`或`router.back()`，但这两个方法不能直接传递参数。 因此，我们可以考虑以下替代方案： 1. 在离开当前页面时，将参数存储到全局状态（如Vuex或Pinia）中，然后在返回的页面中从全局状态中获取。 2. 使用路由的state，在返回时通过`router.push`或`router.replace`模拟返回，并传递state。 然而，模拟返回并传递参数，我们可以这样操作： - 使用`router.push`来跳转到上一个页面的路由，同时传递参数（通过query或state）。但这样并不是真正的“返回”，而是重新导航到上一个页面。 另一种思路：在返回之前，修改上一个页面的状态（比如通过Vuex），这样当上一个页面被重新激活时（例如通过keep-alive）可以获取到新状态。 但是，根据Vue Router的文档，我们可以在导航时传递一个状态对象，这个状态对象可以通过`history.state`来访问。具体步骤如下： - 在返回时，我们使用`router.push`并指定一个状态对象，然后在上一个页面中通过`history.state`来读取。但是注意，`router.push`会添加一个新的历史记录，而不是返回。 其实，我们可以在离开上一个页面时，保存一些状态，然后在返回时恢复这些状态。Vue Router提供了导航守卫，我们可以在离开页面时（beforeRouteLeave）保存状态，然后在进入页面时（beforeRouteEnter）恢复状态。 具体步骤： 1. 在需要返回并传递参数的页面（假设为页面B）中，我们使用`router.back()`或`router.go(-1)`返回，但这样无法传递参数。 2. 因此，我们可以在页面B中，使用`router.push`跳转到页面A（上一个页面）的路由，并在跳转时传递state。例如： ```javascript router.push({ path: '/pageA', state: { data: yourData } }); ``` 然后，在页面A中，我们可以在`mounted`钩子中或通过`route`对象访问这个状态：`history.state`。但是注意，`router.push`会添加一个新的历史记录，所以如果用户点击浏览器的后退按钮，会回到页面B，然后再点一次才会回到页面A之前的页面。 3. 另一种方法是使用Vue Router的导航守卫和路由元信息（meta）来传递数据，但这样比较复杂。 考虑到Vue Router 4支持在导航时传递状态，我们可以这样做： 在页面B中（要返回的页面）： ```javascript import { useRouter } from 'vue-router'; const router = useRouter(); // 要传递的参数 const params = { key: 'value' }; // 使用router.push跳转到上一个页面的路径，同时传递state // 但是我们需要知道上一个页面的路径？我们可以通过route对象获取上一个页面的路径吗？ // 我们可以使用router.go(-1)吗？不行，因为它不接受参数。 // 替代方案：使用history.state来存储数据，然后返回 // 但是，history.state是只读的，我们不能直接修改。 // 所以，我们可以这样：使用router.replace来修改当前历史记录的状态，然后返回 // 步骤： // a. 在页面B中，使用router.replace替换当前历史记录，添加state（这个state是为页面A准备的） // b. 然后调用router.go(-1)返回 // 这样，当返回到页面A时，页面A会得到这个state。 // 但是，在页面A中，我们如何获取这个state？我们可以通过route对象吗？实际上，我们可以通过history.state来获取。 // 具体代码： router.replace({ ...router.currentRoute.value, state: { ...history.state, ...params } }); router.go(-1); ``` 但是，这种方法会修改当前历史记录的状态，并且这个状态会随着返回被带到页面A。在页面A中，我们可以通过`history.state`来获取这个状态。 然而，这种方法可能会覆盖当前历史记录的状态，而且需要谨慎使用。 更简单的方法：使用全局状态管理（如Pinia）来存储页面间传递的数据，这样在返回时，页面A可以从全局状态中读取数据。 考虑到简单性和可维护性，如果项目已经使用了状态管理库，那么推荐使用全局状态。如果没有，我们可以使用Vue Router的state。 下面我们分别介绍两种方法： 方法一：使用全局状态（以Pinia为例） 1. 创建一个store来存储页面间传递的数据。 2. 在页面B中，在返回之前，将需要传递的数据存入store。 3. 在页面A中，从store中获取数据。 方法二：使用Vue Router的state（无需全局状态管理） 1. 在页面B中，使用`router.push`（或`router.replace`）来导航到页面A，并传递state： ```javascript router.push({ name: 'PageA', // 页面A的路由名称 state: { yourData: 'data' } }); ``` 注意：这样会添加一个新的历史记录，所以用户点击浏览器后退按钮会回到页面B，而不是页面A之前的页面。如果用户期望的是真正的“返回”（即历史记录后退一步），那么这种方法就不符合。 2. 在页面A中，通过`history.state`来获取传递的数据： ```javascript import { onMounted } from 'vue'; import { useRoute } from 'vue-router'; const route = useRoute(); onMounted(() => { console.log(history.state); // 这里包含传递的数据 }); ``` 但是，用户要求的是“返回上一个页面”，所以方法二并不是真正的返回，而是重新跳转到页面A。因此，如果用户希望保持历史记录的正确性（即返回操作是后退一步），那么我们应该使用方法一（全局状态）或者使用以下技巧： 技巧：在页面B中，使用`router.replace`修改当前历史记录的状态，然后返回： ```javascript // 在页面B中 const router = useRouter(); // 将需要传递的数据合并到当前历史记录的状态中 const newState = { ...history.state, ...{ yourData: 'data' } }; router.replace({ ...router.currentRoute.value, state: newState }); router.go(-1); ``` 这样，页面A将获得更新后的历史状态。在页面A中，我们可以在`onMounted`或使用`watch`来监听路由变化，然后从`history.state`中读取数据。 但是，这种方法有一个问题：页面A在初始加载时可能已经有一个历史状态，我们在页面B中修改了历史状态，然后返回，页面A会重新激活（如果使用keep-alive）或者重新创建。在重新创建的情况下，我们可以通过`history.state`获取到数据。 然而，需要注意的是，`history.state`在页面刷新后会丢失，所以这种方法只适用于在单次会话中传递数据。 考虑到这些，我们给出两种方案，让用户根据实际需求选择。 步骤总结： 方案1（推荐，使用状态管理）： 1. 在页面B中，存储数据到全局状态（例如Pinia store）。 2. 使用`router.go(-1)`返回。 3. 在页面A中，从全局状态中获取数据。 方案2（使用Vue Router的state）： 1. 在页面B中，使用`router.replace`更新当前历史记录的状态（携带参数），然后调用`router.go(-1)`返回。 2. 在页面A中，通过`history.state`获取传递的数据。 下面我们提供代码示例： 方案1示例（使用Pinia）： 假设我们有一个store：`usePageStore` store定义： ```javascript import { defineStore } from 'pinia'; export const usePageStore = defineStore('page', { state: () => ({ backParams: null }), actions: { setBackParams(params) { this.backParams = params; } } }); ``` 页面B（返回并传递参数）： ```javascript import { useRouter } from 'vue-router'; import { usePageStore } from '@/stores/page'; const router = useRouter(); const pageStore = usePageStore(); // 假设我们要传递的参数 const params = { message: 'Hello from Page B' }; // 存储参数并返回 pageStore.setBackParams(params); router.go(-1); ``` 页面A（获取参数）： ```javascript import { onMounted } from 'vue'; import { usePageStore } from '@/stores/page'; const pageStore = usePageStore(); onMounted(() => { if (pageStore.backParams) { console.log(pageStore.backParams); // 使用后可以清除，避免下次返回时还有 pageStore.setBackParams(null); } }); ``` 方案2示例（使用Vue Router的state）： 页面B： ```javascript import { useRouter } from 'vue-router'; const router = useRouter(); // 要传递的参数 const params = { message: 'Hello from Page B' }; // 合并到当前历史记录的状态 const newState = { ...history.state, ...params }; // 替换当前历史记录，更新状态 router.replace({ state: newState }); // 返回上一页 router.go(-1); ``` 页面A： ```javascript import { onMounted } from 'vue'; onMounted(() => { // 从history.state中获取 console.log(history.state); // 注意：这里会包含页面B传递的参数，也可能包含之前的状态 }); ``` 注意：方案2中，页面A在返回时不会重新创建（如果使用了keep-alive），所以我们需要在激活时获取状态。我们可以使用`onActivated`钩子（如果使用了keep-alive）或者监听路由变化。 另外，方案2中，由于我们修改了历史记录的状态，所以在页面A中刷新后，状态会丢失（因为history.state在刷新后会被重置为初始状态）。而方案1中，全局状态在刷新后也会丢失（除非持久化）。 因此，根据需求选择合适的方法。 生成相关问题： 1. 如何在Vue3中使用Pinia进行全局状态管理？ 2. Vue Router 4中如何利用导航守卫传递数据？ 3. 在Vue3中，如何监听路由变化并获取参数？ 4. 使用history.state传递数据有什么限制？ 5. 如何确保页面刷新后状态不丢失？ 现在，我们根据上述分析，回答用户的问题。</think>### 在 Vue3 中传递参数返回上一个页面 在 Vue3 中实现导航返回并传递参数，可通过以下两种核心方法实现： #### 方法 1：使用路由状态 (Route State) + 编程式导航 ```javascript import { useRouter } from 'vue-router' // 当前页面（页面B）返回时传递参数 const router = useRouter() const goBackWithParams = () => { router.push({ name: 'PreviousPage', // 目标页面名称 state: { backData: { message: '来自页面B的数据' } } }) } ``` ```javascript // 上一个页面（页面A）接收参数 import { onMounted } from 'vue' import { useRoute } from 'vue-router' const route = useRoute() onMounted(() => { if (route.state?.backData) { console.log('接收的参数:', route.state.backData) } }) ``` **优点**：参数不会暴露在 URL 中 **注意**：刷新页面后 `route.state` 会丢失 #### 方法 2：使用查询参数 (Query Parameters) ```javascript // 页面B返回时传递参数 const router = useRouter() const goBackWithQuery = () => { router.push({ path: '/previous-page', query: { source: 'pageB', timestamp: Date.now() } }) } ``` ```javascript // 页面A接收参数 import { watch } from 'vue' import { useRoute } from 'vue-router' const route = useRoute() watch( () => route.query, (newQuery) => { if (newQuery.source) { console.log('来源页面:', newQuery.source) } } ) ``` **优点**：参数持久化，支持页面刷新 **缺点**：参数可见在 URL 中 #### 最佳实践建议 1. **敏感数据**：使用路由状态 (`state`) 避免 URL 暴露 2. **大数据量**：结合 Pinia/Vuex 全局状态管理 3. **路由守卫**：可在导航守卫中验证参数有效性 ```javascript router.beforeEach((to, from) => { if (to.state?.backData && !validateData(to.state.backData)) { return { path: '/error' } // 无效参数重定向 } }) ``` ### 相关问题 1. Vue Router 4 中如何实现页面间复杂数据传递？ 2. 使用路由状态 (`state`) 传递数据时如何避免刷新丢失？ 3. 如何在 Vue3 组合式 API 中监听路由参数变化？ 4. 路由导航守卫中如何验证动态参数的有效性？ 5. Pinia 和 Vuex 在路由参数管理中如何选择？ > 提示：对于需要持久化的参数，建议结合本地存储或 Pinia 状态管理库使用，参考 Vue Router 状态管理机制[^3]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值