vue中如何点击列表页跳转到详情页，并保存当前点击的位置，返回时仍是当前位置

最新推荐文章于 2024-04-10 17:11:26 发布

小周同学:

最新推荐文章于 2024-04-10 17:11:26 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_58495461/article/details/119987263

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了如何在Vue Router中实现页面缓存和滚动行为的自定义。首先，在router/index.js中通过meta属性设置路由缓存。接着，配置scrollBehavior函数，使页面在切换时能滚动到顶部或保持原有位置。在App.vue中，利用keep-alive组件实现缓存组件的管理。最后，展示了如何在方法中使用backList()返回并跳转页面。该教程旨在提升用户体验和性能优化。

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

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

{
path: ‘/’,
name: ‘Home’,
component: Home,
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)：前进