vue-router导航守卫

m0_53490870

于 2023-06-02 14:52:57 发布

阅读量55

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_53490870/article/details/131006877

版权

在Vue应用中，当需要在路由跳转前后执行特定逻辑时，可以使用VueRouter的导航守卫功能，包括全局守卫、路由独享守卫和组件内守卫。全局守卫适用于通用逻辑，路由独享守卫针对个别路由，而组件内守卫则允许在组件内部处理跳转事件。例如，beforeEach用于全局前置守卫，beforeEnter用于路由独享守卫，beforeRouteEnter则用在组件内。

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

什么情况下会使用？

需要在路由跳转前后做处理时会使用。

主要有三种导航守卫：全局守卫、路由独享守卫、组件内守卫

需要在路由跳转做一些通用逻辑的时候可以使用全局守卫

import { createApp } from 'vue';
import {createRouter, createWebHistory} from 'vue-router';
import routerConfig from './route.config';
import App from './App';

const router = createRouter({
    history: createWebHistory(),
    routes: routerConfig
});

// 全局守卫
router.beforeEach((to, from) => {
    console.log(`从${from.path} 跳转到  ${to.path}`);
});

createApp(App).use(router).mount('#app')

对于个别路由自己的逻辑可以使用路由独享守卫

{
    path: '/user/:id',
    component: User,
    children: [
        {
            path: 'list',
            component: UserList,
          	// return false 则不跳转
            beforeEnter: () => {
                return false
            },
        },
        {
            path: 'detail',
            component: UserDetail
        },
    ]
}

组件内也可以使用相应的钩子来处理跳转逻辑

// UserList.vue

<template>
    <div>user-list</div>
</template>

<script>
    export default {
        beforeRouteEnter() {
            return false;
        }
    };
</script>

更多：Vue Router · 语雀