博客

首先我们认识一下vue路由的生命情况

1.两个新生命周期


对于vue来讲，每一次加载进的页面都是进入到一个栈里面，加入一个新的页面就往栈里添加一条数据，点击返回就退到上一条数据，

上一个vue页面就是被销毁了。

现在有一个需求，就是a页面填写完数据，切到b页面，然后返回来a页面的时候数据还在，应该怎么实现呢

由于当你跳到下一个页面的时候，上一个页面就会被销毁了，所以我们需要一个代码保持组件的生存

我们引入一个全新的vue标签

<keep-alive>

，意思是保持你的组件代码切换的时候不被销毁。

<keep-alive > 
  <router-view></router-view>
</keep-alive>

当然你可以指定一个或者多个不被销毁，include里面的是vue的名称，也就是这个

<keep-alive include="About"> //保持一个组件生存
<keep-alive :include="['About','Home']">//保持多个组件生存
   	<router-view></router-view>
 </keep-alive>

如图，在切换到Home组件再切回来的时候input输入框的内容还在，说明这个组件没有被销毁

当你使用了

keep-alive

以后，由于当切换组件以后，上一个组件就不会被销毁，那么如何区分是否点击切换了页面呢，vue这时就多了两个全新的状态，

激活与非激活状态

，

激活状态就是vue页面显示的时候的状态，非激活状态就是vue页面没有被显示，但是没有被销毁的状态

 // 新的生命周期钩子
  //激活组件钩子
  activated(){
    console.log("激活组件钩子")
  },
  //失活生命周期钩子
  deactivated(){
    console.log("失活组件钩子")
  },

2.路由守卫

我们经常需要一些情况，就是某些页面只允许某一些用户观看，那么我们应该怎么做呢，

路由守卫就是帮助我们像过滤器一样过滤掉一些不允许访问的客户，使得他们没办法访问到具体的页面

（1）前置路由守卫



前置路由守卫就是当页面切换前进行判断，如果符合某一些要求，就允许他访问。


现在我们实现一个功能，要求只有名称叫aaa的用户才能访问到/home/news页面




代码如下，再路由文件route.js里面添加如下代码

//前置路由守卫
router.beforeEach((to,from,next)=>{
    //3个参数，to去哪，from从哪来，next下一步干嘛

    //只有aaa才能去/home/news，判断是否去/home/news，不是的话通行
    if(to.path==='/home/news'){
    	//判断去的人是不是aaa，不是的话不给过
        if(localStorage.getItem('name')==="aaa"){
            next()//通行
        }else{
            console.log("不可以去");
        }
    }else{
        next()
    }    
})

这种方法只能给一两个页面设置验证，若是想给大量的页面做身份验证的话，我们可以这样设置



第一步，给需要身份验证的文件添加判断语句

{
     path:'/about', 
      component:About,
      meta:{isAuth:true}//给路由器的文件路径加上判断语句
},

第二步，对添加了判断身份的路径进行判断



代码编写如下

router.beforeEach((to,from,next)=>{
    //3个参数，to去哪，from从哪来，next下一步干嘛
    
	//只有aa才能去授权的页面(授权的页面添加meta:{isAuth:true})
    if(to.meta.isAuth){//判断是否为真
        if(localStorage.getItem('name')==="aaa"){
            next()
        }else{
            console.log("不可以去");
        }
    }else{
        next()
    }   
})

这样子就可以快速的给大量的路径添加身份判断了。

（2）后置守卫



有前置守卫自然有后置守卫，后置守卫是当页面跳转完成以后对页面进行判断。

//后置路由守卫  当页面切换后进行判断
router.afterEach((to,from)=>{
    //to去哪，from从哪来，没有next，因为已经跳转了
    console.log("切换完毕");
})

（2）独享守卫



上面的方法都是对整个路由器进行判断的，若是只想给一两个路由上守卫，也可以直接把守卫写在路由器中

{
	name:"zujian",
	path:'/zujian', 
	component:zujian,
	beforeEnter:(to,from,next)=>{//直接把守卫写在在这里了
	    console.log("独享路由守卫")
	    next()
} 

（2）组件内路由守卫



路由守卫不单单只写在路由文件中，也可以写在vue文件中

//组件内路由守卫
  beforeRouteEnter(to,from,next){
    console.log('组件内路由守卫--进入')
    next()
  }