vue-router 路由守卫

import Router from 'vue-router';
import vue from 'vue'
import home from "./home";

vue.use(Router);

//路由懒加载
// 方法一,es6语法，常用的加载
const home = () => import('./page/home')

//方法二，组件异步懒加载，直接在下面component中使用
component:resolve => (require(['./page/home']), resolve)


const router = new Router(
    {
        routes: [
            {
                path: '/home',
                name: 'home',
                component: home,
                meta: {
                    title: '首页'
                },
                //独享路由守卫
                beforeEnter: function (to, f, n) {
                    next();
                }
            }
        ]
    }
);
//路由守卫，4种
//第一种，前置路由守卫，跳转前进入
router.beforeEach((to, from, next) => {
    if (to.meta.title == '') {
        next()
    }
})
//第二种，后置路由守卫，从路由页面离开
router.afterEach((to, from) => {

})
//第三种，独享路由守卫，用在定义路由路径上

//第四种，组件路由守卫，在组件内的路由守卫
//组件进入前，该方法中不能访问到this,因为this组件还没有被创建
beforeRouteEnter(to,f,n){
    next();
}
//组件，路由变化时,该方法可以访问this
beforeRouteUpdate(to,f,n){
    next()
}
//组件路由离开时，该方法可以访问this
beforeRouteLeave(to,f,n){
    next();
}
export default router;



//main.js中挂载全局
import router from "./router/router.js";

new vue({
    router
}).$mount('#app')