vue的跳转记录保存当前位置

最新推荐文章于 2024-07-07 02:06:42 发布

@Programmer

最新推荐文章于 2024-07-07 02:06:42 发布

阅读量608

点赞数

分类专栏： vue跳转保存位置文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_59097751/article/details/119983926

版权

vue跳转保存位置专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue应用中通过设置meta属性实现组件缓存，利用scrollBehavior控制路由切换时的滚动行为，包括设置默认滚动到顶部和保持原有滚动位置。同时，展示了如何在App.vue中配置keep-alive以管理和优化组件渲染。

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

第一步：在router文件里面的index.js写入

 {
    path: '/carsList',
    name: 'CarsList',  //汽车列表
    component: () => import(/* webpackChunkName: "about" */ '../views/CarsList.vue'),
    meta: {
      keepAlive: true    //需要缓存
    }
}

上面是跳转路由，主要是把meta添加到里面

第二步：还是在这个文件里面加入

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
 
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 } //期望滚动到哪个的位置
    }
   },
})

加入的是scrollBehavior

scrollBehavior滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

也可以不用写判断直接写，这也是为了两个页面一起滚动的问题

scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
   },

第三步：在App.vue文件里面添加

<!--  缓存组件跳转的页面 -->
     <keep-alive>   
        <router-view v-if="$route.meta.keepAlive" class="ui-view"  transition-mode="out-in"></router-view>
    </keep-alive>  
  <!-- 非缓存组件跳转页面 -->
  <router-view v-if="!$route.meta.keepAlive" class="ui-view"  transition-mode="out-in"></router-view>

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

第四步：在跳转过去的页面返回当前页面的时候使用back返回页面

 methods: {
    backList() {
      this.$router.back("/跳转页面文件名");
    },
  },

back(): 原页表表单中的内容会保留；

history.back():后退；

history.back(0) 刷新；

history.back(1)：前进