reactrouter监听路由变化_web前端框架vue的路由监听和路由守卫

路由监听：

//当一个组件被复用的时候，那么路由发生变化，但是页面上面的数据不会发生变化

新建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