Vue 全局前置-路由守卫和全局后置-路由守卫

最新推荐文章于 2023-11-10 11:43:38 发布

成虚员

最新推荐文章于 2023-11-10 11:43:38 发布

阅读量124

点赞数

分类专栏： vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_48546501/article/details/129973544

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在Vue项目中，路由是重要组成部分。本文介绍了如何在router.index.js中配置VueRouter，包括引入组件和创建路由器。接着，文章详细阐述了全局前置路由守卫和全局后置路由守卫的概念，前者在每次路由切换前调用，后者在切换后调用。通过beforeEach和afterEach方法，可以实现对路由切换的控制和后期处理。

摘要由CSDN通过智能技术生成

Vue 全局前置-路由守卫和全局后置-路由守卫

在路由配置router->index.js编写代码

//引入文件，该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/Home'
import Home from '../components/About'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
    routes: [{
            name:'about',
            path: '/about',
            component: About
        },
        {
            name:'home',
            path: '/home',
            component: Home,
            children: [{
            	name:'message/:id/:title', //占位符
                path: "message",
                component: Message
            }]
        }
    ]
})


//在这里编写全局路由守卫
//全局前置-路由守卫----初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
//to是你要跳转到那个路由组件
//from是你从哪个路由组件跳转过来的
//可以在next()前设置条件，当符合条件就放行，比如：
	if(to.path === '/home'){
		next()
	}
})

//全局后置-路由守卫----初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{      //注意全局后置-路由守卫没有next

})


export default router