Vue 脚手架学习第六天 导航守卫，嵌套路由 ，axios异步请求

1.导航守卫

//当从一个路由跳转到另一个路由的时候触发此守卫，这个守卫也叫全局前置守卫，所以它是跳转前触发的。任何路由跳转都会触发。
// 导航守卫拦截路由作用
//to: Route: 即将要进入的目标 路由对象，终点
//from: Route: 当前导航正要离开的路由,起点
//next：是一个方法，它接受参数。这个方法必须调用要不就跳不过去了，你可以把它看做保安。必须给它打个招呼，要不然不让你过。
router.beforeEach((to, from, next) => {

    if (to.path == '/agr') {
        console.log('hello');
        next("/aww")//拦截成功后修改跳转地址
    }
    next();

})

2.嵌套路由

const router = new VueRouter({
    routes: [
        {
            path: "/",
            props: true,
            component: () => import('../page/Home'),
            children: [
                {

                    path: "/a",
                    props: true,
                    component: () => import('../components/a')
                },
                {

                    path: "/b",
                    props: true,
                    component: () => import('../components/b')
                },
            ]
        },
        {
            name: 'agr',
            path: "/agr",
            props: true,
            component: () => import('../components/agr')
        },
        {

            path: "/aww",
            props: true,
            component: () => import('../components/aww')
        },
        {

            path: "/ktz",
            props: true,
            component: () => import('../page/ktz'),
            children: [
                {

                    path: "/c",
                    props: true,
                    component: () => import('../components/c')
                },
                {
                             
                    path: "/d",//名字不一样
                    props: true,
                    component: () => import('../components/b')
                },
            ]
        }
    ]
})

3.axios异步请求

 methods: {
    // 异步请求数据
    async del() {
      let res = await axios.post(
        "https://www.fastmock.site/mock/3c58821fe3a32b3bebde3ad914ec54d4/study/layList"
      );
      console.log(res);
    }
  }