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

最新推荐文章于 2024-07-22 18:05:15 发布

buppt

最新推荐文章于 2024-07-22 18:05:15 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： vue 回到浏览位置

本文链接：https://blog.csdn.net/buppt/article/details/78900439

版权

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

摘要由CSDN通过智能技术生成

打开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 如下：