keep-alive,实现前进刷新，后退不刷新

const router = new Router({
  routes:[
    {
      path:'/login',
      component:Login,
      meta: {
        keepAlive:true
      }
    },
    {
      path:'/login/server',
      component:Server,
      meta:{
        keepAlive:true
      }
    },
    {
      path:'/login/server/main',
      component:Main,
      meta:{
        keepAlive:true
      }
    }
  ]
})

由于这三个界面path的层级不同，我就能通过beforeEach这个钩子判断出什么时候是后退了。在后退时将from路由的keepAlive置为false，to路由的keepAlive置为ture。###

router.beforeEach((to, from, next) => {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
console.log('后退。。。')
from.meta.keepAlive = false
to.meta.keepAlive = true
}
next()
})

最后需要缓存的界面用keep-alive包起来，就能实现时前进刷新，后退时不刷新的效果了###

<keep-alive>
   <router-view v-if="$route.meta.keepAlive">
  <!-- 这里是会被缓存的视图组件 -->
   </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
   <!-- 这里是不被缓存的视图组件 -->
</router-view>

使用include/exclude

// 组件 a
export default {
name: 'a',
data () {
return {}
}
}

<keep-alive include="a">
<router-view>
    <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
</router-view>
</keep-alive>

exclude例子类似