vue路由刷新后就没有了

Vue路由刷新后数据丢失的问题通常是因为浏览器将从服务器获取初始页面，而此时前端的Vue应用还没有运行起来，因此Vue的路由状态无法被保存下来。当页面刷新时，SPA（单页面应用）的路由信息通常是不会被发送到服务器的，所以服务器返回的是一个初始的HTML页面，而不是根据当前路由状态的页面内容。

为了解决这个问题，可以使用HTML5 History模式配合后端配置或者使用前端存储方案来保留路由状态。具体方法如下：

1. 后端配置：确保服务器配置能够正确处理History模式下的路由，通常需要在服务器配置中添加一条规则，将所有的路由请求都指向同一个入口文件（通常是index.html），这样前端路由就可以接管并根据URL显示相应的组件。

2. 前端存储方案：可以利用localStorage或sessionStorage来保存当前的路由状态，在页面加载时读取这些状态，并通过编程方式设置路由，使页面跳转到用户之前浏览的位置。

在Vue项目中，可以使用vue-router提供的`scrollBehavior`方法来实现页面滚动位置的保存与恢复。

例如：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

相关问题

vue 路由刷新父页面

在Vue中，可以通过路由刷新父页面的方法有两种：使用路由参数和使用事件总线。

1. 使用路由参数：可以在路由跳转时传递参数给父页面，然后在父页面中监听参数的变化，从而实现刷新。具体步骤如下：
- 在路由配置中定义需要传递的参数，例如：

     {
       path: '/parent',
       name: 'Parent',
       component: ParentComponent,
       props: true
     }

- 在子页面中跳转到父页面时，传递参数：

     this.$router.push({ name: 'Parent', params: { refresh: true } })

- 在父页面中监听参数的变化，并进行相应的刷新操作：

     watch: {
       $route(to, from) {
         if (to.params.refresh) {
           // 执行刷新操作
         }
       }
     }

2. 使用事件总线：可以通过创建一个全局的事件总线来实现子页面向父页面发送刷新事件，然后在父页面中监听该事件并进行相应的刷新操作。具体步骤如下：
- 创建一个事件总线实例，例如：

     // EventBus.js
     import Vue from 'vue'
     export default new Vue()

- 在子页面中发送刷新事件：

     import EventBus from './EventBus.js'
     EventBus.$emit('refreshParent')

- 在父页面中监听刷新事件，并进行相应的刷新操作：

     import EventBus from './EventBus.js'
     // 在created或mounted钩子函数中监听事件
     created() {
       EventBus.$on('refreshParent', () => {
         // 执行刷新操作
       })
     }

vue路由传参刷新就没了

在Vue中使用路由传参时，如果页面刷新，参数会丢失。这是因为在Vue中，路由传参是通过路由的query或params属性实现的。而这些属性保存在浏览器的历史记录中，当页面刷新时，浏览器的历史记录会被清空，所以参数也就丢失了。

为了解决这个问题，我们可以将参数保存在localStorage或sessionStorage中。localStorage和sessionStorage是HTML5提供的API，用于在浏览器中存储数据。其中localStorage的数据会一直保存在本地，除非用户手动清除，而sessionStorage的数据只在会话期间存在，刷新页面或关闭浏览器后数据即被删除。

在使用localStorage或sessionStorage时，我们需要在页面加载时从中读取参数，并在组件中使用。当需要更新参数时，我们只需要将更新后的参数重新存储到localStorage或sessionStorage中即可。

另外，为了更好的用户体验，我们可以使用Vue的keep-alive组件缓存页面，并在切换页面时将参数从缓存中读取出来。这样即使页面刷新，也能保留参数。

总的来说，路由传参在Vue中刷新后丢失是一个常见的问题，但我们可以使用localStorage、sessionStorage和keep-alive等方法来解决这个问题。