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 }`。

相关问题

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')
  }
}

vue+element跳转路由传值，刷新时值还在

在Vue.js应用中，结合Element UI进行路由跳转并传递数据时，可以使用Vuex状态管理库来保存重要的状态，如路由参数。当通过`this.$router.push()`进行路由切换并传递参数时，可以在`beforeRouteEnter`钩子中将数据存储到Vuex store中。

例如：

// router/index.js
import { mapState } from 'vuex';
export default {
  beforeRouteEnter(to, from, next) {
    // 获取需要传递的数据
    const param = to.query.yourParam;
    
    // 使用next()函数进入组件，并把数据作为props传递
    next(vm => vm.$store.dispatch('setRouteParam', param));
  },
};

// vuex/store/actions.js
export const setRouteParam = (param) => {
  return ({ commit }, value) => {
    commit('SET_ROUTE_PARAM', value);
  };
};

// vuex/store/mutations.js
const mutations = {
  SET_ROUTE_PARAM(state, param) {
    state.routeParam = param; // 或者你想存入的其他地方
  }
};

然后，在目标组件里，你可以从`$route`对象或`$store.state`中获取数据：

computed: {
  routeData () {
    return this.$store.state.routeParam;
  }
},
mounted() {
  console.log(this.routeData); // 这里会显示你在路由跳转时传递的参数
}

这样，即使页面刷新，因为数据已经存储在Vuex的状态中，值依然存在。但是请注意，如果数据来源于用户输入，刷新页面后通常会丢失，除非采用持久化方案，比如localStorage。