javascript - 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页又刷新了一遍，怎么避免？照理说后退的时候不是应该无刷新后退的吗。。

解决方案

routes: [
        {path: '/',component: Index, meta: { keepAlive: true }},
        {path: '/index',component: Index, meta: { keepAlive: true }},
        {path: '/search',component: Search}
     ],
     
    解决了，是router里忘了加keepAlive:true 。。。。。。。。

这篇关于javascript - vue-router scrollBehavior返回上一页时页面就刷新了。。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！