您好,欢迎来到刀刀网。
搜索
您的当前位置:首页vue中怎样实现 路由

vue中怎样实现 路由

来源:刀刀网


路由,也称为路由守卫,主要分为全局守卫和局部守卫两种类型。

全局守卫通常被定义在路由配置文件中,每当路由发生变化时,都会执行相应的守卫逻辑。例如:

// 在进入页面之前执行

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

// 在进入页面之后执行

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

局部守卫则是在具体的Vue组件内部定义,只对当前组件生效。其写法与Vue生命周期函数相似,包括:

beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被确认前调用 // 不能获取组件实例`this` // 因为当守卫执行前,组件实例还没被创建 }

beforeRouteUpdate(to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径`/foo/:id`,在`/foo/1`和`/foo/2`之间跳转时, // 由于会渲染同样的`Foo`组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例`this` }

beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例`this` }

对于更详细的使用方法,可以参考Vue Router的官方文档。

Copyright © 2019- gamedaodao.com 版权所有 湘ICP备2022005869号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务