vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作

<template>
 <div id="app">
 <!--<img src="./assets/logo.png">-->
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive">
  <!-- 这里是会被缓存的视图组件A -->
  </router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件B -->
 </router-view>
 </div>
</template>

export default new Router({
 routes: [
 {
  path: '/',
  name: 'Initinfo',
  component: Initinfo
 },
  {
   path: '/B',
   name:'B',
   component: CredentialsDetails,
   meta:{keepAlive:false}
  },
  {
   path: '/A',
   name:'A',
   component: ASeal,
   meta:{keepAlive:true}
  }

 ]
})

export default new Router({

 //使用keep-alive后，可能存在滚动条问题的解决问题
 mode:'hash',//默认是hash模式 且有history
 scrollBehavior(to,from,savePosition) { // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。
  console.log(to) // to：要进入的目标路由对象，到哪里去
  console.log(from) // from：离开的路由对象，哪里来
  console.log(savePosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
  if(savePosition){
   return savePosition;
  }else{
   return {
    x: 0,
    y: 0
   }
  }
 },
 routes: [
  {
   path: '/',
   name: 'Initinfo',
   component: Initinfo
  },
  {
   path: '/B',
   name:'B',
   component: CredentialsDetails,
   meta:{keepAlive:false}
  },
  {
   path: '/A',
   name:'A',
   component: ASeal,
   meta:{keepAlive:true}
  }

 ]
})

{
 path: '/A',
 name:'A',
 component: ASeal,
 meta:{keepAlive:true}
 }

export default {
 beforeRouteLeave(to, from, next) {
  console.log(to);
  console.log(from)
  // 设置下一个路由的 meta
  to.meta.keepAlive = true; // 让 A 缓存，即不刷新
  next();//确保要调用 next 方法，否则钩子就不会被 resolved
 }
}; 

export default {
 beforeRouteLeave(to, from, next) {
  console.log(to);
  console.log(from)
  // 设置下一个路由的 meta
  to.meta.keepAlive = false; // 让 A不缓存，即刷新
  next();//确保要调用 next 方法，否则钩子就不会被 resolved
 }
}; 

 beforeRouteEnter(to,from,next){
  global.beforeRouteName = from.name; //给全局变量赋值
  next();
 },

mounted(){
 //判断浏览器是否支持popstate
 if(window.history && window.history.pushState){
  history.pushState(null,null,document.URL);
  window.addEventListener('popstate',this.goBack,false);
 }
 }

goBack(){
 if(global.beforeRouteName == "C"){  //判断，当获取上个页面进来的路由是C的时候，返回到A页面
  this.$router.push({name:'A'}); 
 }else if(global.beforeRouteName == "E"){　　//判断，当获取上个页面进来的路由是E的时候，返回上一页
  history.go(-1);
 }else{
  this.$router.push({name:'A'}); //判断，当有其他返回值的时候，默认返回到A页面（这个随意设置，一般不会有这种情况）
 }
 }

destroyed(){
 window.removeEventListener('popstate',this.goBack,false);
}

 beforeRouteLeave(to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
  if(!this.isPublish){
   this.confirmVisible=true
   next(false)//不放行
  }else {
   next()
  }
 
 },