vue路由监听及路由守卫

Posted 2021-01-18 -roc

路由监听：

//当一个组件被复用的时候，那么路由发生变化，但是页面上面的数据不会发生变化
新建one.vue 组件 作为home的子组件，在home.vue 中写遍历渲染页面 ，并用params传参，
one中 因为created只执行了一次，就接收都第一次传的值，所以需要监听

方案：

1、watch :{ "$route"(to,from){ this.name = to.params.name ; } }
to 中有params 属性，有name 和 id
from （从哪来，上一次点击的记录）

路由守卫 2、路由守卫1 !!!

beforeRouteUpdate(to,from,next){ this.name = to.params.name ;next() }
to 中params 属性 有name 和id
next() 必加，to

3、路由守卫2 !!! 离开时

beforeRouteLeave(to,from,next){ var flag = confirm("您确定要离开吗") if（flag）{ next（） }}
confirm 中，点击确定为true，取消为false；next必须

4、路由守卫3 ！！！ 进入时

访问不到this，因为进入前 组件没有导入。调用next函数
beforeRouteEnter(to,from,next){
// 访问不到this，因为进入前组件没有导入，需要用到next
next((vm)=>{
// 通过ajax的success 接收后台传来的 登录状态
let flag = false;
if(!flag){
vm.$router.push("/login");
}else{
next();
} }

 

 

全局守卫：index.js 中

const router = new Router{ ... }
//验证用户的登录状态
router.beforeEach(to,from,next){
let flag = false;
//需要全局守卫的路由的name
let routers = ["find","order","my"]
//
if(routers.indexOf(to.name)>=0){
if(!falg){
router.push("/login")
}else{
next();
}
}else{
next();
}
}

export default router
index.js 中导出router