vue 前进刷新后退不刷新

537 阅读1分钟

#html部分

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
  </div>
</template>

#js部分

const Login = () => import('@/components/Login')
const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      keepAlive: true
    }
  }
]
export default new Router({
  routes,
  scrollBehavior (to, from, savedPosition) {
    // 从第二页返回首页时savedPosition为undefined
    if (savedPosition || typeof savedPosition === 'undefined') {
      // 只处理设置了路由元信息的组件
      from.meta.keepAlive = typeof from.meta.keepAlive === 'undefined' ? undefined : false
      to.meta.keepAlive = typeof to.meta.keepAlive === 'undefined' ? undefined : true
      if (savedPosition) {
        return savedPosition
      }
    } else {
      from.meta.keepAlive = typeof from.meta.keepAlive === 'undefined' ? undefined : true
      to.meta.keepAlive = typeof to.meta.keepAlive === 'undefined' ? undefined : false
      return {
        x: 0,
        y: 0
      }
  }
})