vue-router实现回到离开时的浏览位置

最新推荐文章于 2025-06-16 18:04:05 发布

原创最新推荐文章于 2025-06-16 18:04:05 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #回到浏览位置

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在Vue-Router中实现页面回退时保持原来的浏览位置。通过修改配置文件，不缓存所有页面并在需要的组件中使用`keep-alive`来记录位置。返回时由于不触发`created`钩子，相关逻辑应放在`activated`中。经测试，设置`keep-alive`的组件在返回时能正确返回到之前的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打开vue-cli项目中的 router.js 文件，添加mode 。
在需要记录浏览位置的组件中添加meta 如下：

export default new Router({
  mode: 'history',  //这里
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[
        {
          path: '/',
          component: MainPage,
          meta: {               //这里
            title: 'home',
            keepAlive: true,
          }
        }
       ]
    }
  ]
})

然后修改app.vue 如下：

<template>
  <div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>  
  </div>
</template>