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')
vue-router 路由守卫
最新推荐文章于 2024-07-30 11:34:14 发布