vue 路由参数刷新不丢失的方法

可以使用 HTML5 的 history 模式来解决 Vue 路由参数刷新不丢失的问题。在 Vue 的路由配置中，设置 mode 为 history，即可启用 history 模式。

具体配置方法如下：

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 路由配置
  ]
})

在将 Vue 打包成生产环境时，需要在服务器端进行一些配置，以确保页面刷新时不会出现 404 错误。具体配置方法可以参考 Vue 官方文档：[HTML5 History 模式](https://router.vuejs.org/zh/guide/essentials/history-mode.html#html5-history-%E6%A8%A1%E5%BC%8F)。

相关问题

vue param 路由参数刷新不丢失的方法

在 Vue.js 中，使用 $route.params 获取路由参数。如果要在刷新页面后仍然保留参数，可以将参数保存到本地存储中，然后在页面加载时从本地存储中获取参数。

以下是一个示例：

1. 在路由跳转时保存参数到本地存储中：

// 在路由跳转时保存参数到本地存储中
this.$router.push({ path: '/path', query: { id: 1 }})
localStorage.setItem('id', 1)

2. 在页面加载时从本地存储中获取参数：

// 在页面加载时从本地存储中获取参数
const id = localStorage.getItem('id')

3. 在组件中使用 $route.params 或从本地存储中获取参数：

// 在组件中使用 $route.params 或从本地存储中获取参数
computed: {
  id() {
    // 优先使用 $route.params 中的参数
    if (this.$route.params.id) {
      return this.$route.params.id
    }
    // 如果 $route.params 中不存在参数，则从本地存储中获取参数
    return localStorage.getItem('id')
  }
}

vue3 param 路由参数刷新不丢失的方法

在 Vue3 中，可以使用 `keep-alive` 组件来缓存被访问过的页面，从而避免路由参数丢失。具体方法如下：

1. 在 `App.vue` 中添加 `keep-alive` 组件：

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

2. 在需要缓存的页面组件中，添加 `keep-alive` 属性：

<template>
  <div>
    <h1>{{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Page',
  keepAlive: true // 添加 keep-alive 属性
}
</script>

这样，在访问该页面时，路由参数就会被缓存起来，刷新页面时也不会丢失。同时，如果需要清除缓存，可以在路由配置中设置 `meta: { keepAlive: false }`。