vue-router scrollBehavior返回上一页时页面就刷新了。。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index.vue'
import Search from '@/pages/search.vue'
Vue.use(Router)
export default new Router({
    mode: 'history',
    routes: [
        {path: '/',component: Index},
        {path: '/index',component: Index},
        {path: '/search',component: Search}
     ],
      scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            console.log(1)
            return savedPosition
        } else {
            console.log(2)
            if (from.meta.keepAlive) {
                from.meta.savedPosition = document.body.scrollTop;
            }
            return { x: 0, y: to.meta.savedPosition ||0}
        }
    }
})

App.vue

<template>
  <div>
    <transition name="router-fade" mode="out-in">
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      </transition>
      <transition name="router-fade" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    </div>
</template>

图片描述

图片描述

在search页面点击返回按钮 调用的是this.$router.go(-1),结果返回到index页的时候,index页又刷新了一遍,怎么避免?照理说后退的时候不是应该无刷新后退的吗。。

阅读 6.3k
1 个回答
routes: [
        {path: '/',component: Index, meta: { keepAlive: true }},
        {path: '/index',component: Index, meta: { keepAlive: true }},
        {path: '/search',component: Search}
     ],
     
    解决了,是router里忘了加keepAlive:true 。。。。。。。。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题