温馨提示×

vue-router的导航钩子有哪些

清风
1795
2021-03-15 17:35:29
栏目: 编程语言
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

vue-router的导航钩子有:1.全局导航钩子;2.组件内的钩子;3.单独路由独享组。

vue-router的导航钩子有哪些

vue-router的导航钩子有三种,分别是:1.全局导航钩子;2.组件内的钩子;3.单独路由独享组,主要是用来拦截导航,让他完成跳转或取消,以下是导航钩子的使用示例:

1.全局导航钩子。

注意:全局导航钩子主要有前置守卫和后置钩子两种。

//前置守卫

const router = new VueRouter({ ... });

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

// do someting

});

//后置钩子

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

// do someting

});

2.组件内的钩子。

注意:组件内的导航钩子主要有beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave这三种。

const File = {

    template: `<div>This is file</div>`,

    beforeRouteEnter(to, from, next) {

        // do someting

        // 在渲染该组件的对应路由被 confirm 前调用

    },

    beforeRouteUpdate(to, from, next) {

        // do someting

        // 在当前路由改变,但是依然渲染该组件是调用

    },

    beforeRouteLeave(to, from ,next) {

        // do someting

        // 导航离开该组件的对应路由时被调用

    }

}

3.单独路由独享组。

//在路由配置上直接进行定义

cont router = new VueRouter({

routes: [

{

path: '/file',

component: File,

beforeEnter: (to, from ,next) => {

// do someting

}

}

]

});

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:vue-router跳转问题怎么解决

0