路由守卫是在导航过程中对路由进行拦截和控制的功能。Vue Router提供了全局守卫和组件内守卫两种类型的路由守卫。全局守卫会影响整个应用程序的路由,而组件内守卫只会影响组件自身的路由。下面是具体的代码实现方法:
全局前置守卫:全局前置守卫会在路由切换前执行,可以用来进行身份验证或路由拦截等操作。
javascript
// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = new VueRouter({
routes,
});
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 可以在此进行身份验证等操作
console.log('即将进入路由:', to.path);
next(); // 必须调用 next(),否则路由不会继续切换
});
new Vue({
router,
render: h => h(App),
}).$mount('#app');
组件内守卫:组件内守卫可以在组件中定义,用于对特定组件的路由进行控制。
vue
<!-- Contact.vue -->
<template>
<div>
<h1>Contact</h1>
<p>Contact ID: {{ $route.params.id }}</p >
</div>
</template>
<script>
export default {
// 组件内守卫
beforeRouteEnter(to, from, next) {
// 在进入路由前执行,无法直接访问组件实例
console.log('即将进入路由:', to.path);
next(); // 必须调用 next(),否则路由不会继续切换
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时执行
console.log('路由更新:', to.path);
next();
},
beforeRouteLeave(to, from, next) {
// 在离开当前路由时执行
console.log('即将离开路由:', from.path);
next();
},
};
</script>
在路由守卫中,通过调用 next() 方法来允许路由继续切换。如果不调用 next(),路由将被阻止并保持在当前状态。
使用路由守卫,可以在导航过程中执行必要的操作,例如登录验证、权限控制、数据加载等。