vue中的路由守卫/元信息/嵌套路由

一、组件内部路由守卫

1. 到达这个组件时，beforeRouteEnter:(to,from,next)=>{}

  在进入组件页面时，内部路由守卫可以进行判断，可以阻止/允许访问

to 返回 目标页面信息；

from 返回 跳转页面信息；

next（）方法；参数为true时，允许跳转，参数为false时阻止跳转；

 2.离开组件时，触发路由守卫

beforeRouteLeave(to,from,next){},参数和以上一样

export default { 
    beforeRouteEnter(to, from, next) {
    //next回调函数中vm是vue实例
          next((vm) => {
          console.log(vm);// 返回Vue实例化对象
          alert(vm.str);//可以通过vm实例获取data中的值，在这个钩子函数上，this指向不是vm
        });
      },
        data() {
        return {
        str: "你好啊大男孩",
        car: "",
        house: "",
      };
    },
}

3.当离开页面时，触发

 beforeRouteLeave(to, from, next) {}

  beforeRouteLeave(to, from, next) {
    if (confirm("客官您真的要走吗？")) {
      next();
    } else {
      next(false);
    }
  },

4.当路由路径发生变化时，会触发

beforeRouteUpdate(to, from, next) {}

二、全局路由守卫

1.进入页面之前的路由守卫

router.beforeEach((to,from,next)=>{})

 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

 2.离开页面时候的路由守卫

router.afterEach((to,from)=>{})

to,from参数和上面一样，注意afterEach()是没有next方法的；

 如小例子：当从about页面离开时，弹出提示框；

三、路由元信息

使用mate关键字来配置路由元信息，可以对元信息做分析判断等操作；

四、嵌套路由（二级路由）

路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法。

嵌套路由的关键字children，在父路由中添加children数组 中添加子路径；