Vue.js 是一款流行的前端框架，具有良好的响应性和可维护性。在实际应用中，很多页面需要根据用户不同的权限动态生成路由和导航栏。本文将介绍如何使用 Vue.js 实现动态路由和导航守卫功能，让我们便捷地实现这类需求。
什么是动态路由？
动态路由是一种根据用户权限动态生成路由的技术。在使用动态路由后，可以根据不同的权限配置不同的路由，避免将所有路由配置在同一个文件中。
比如，我们在学校的网站中，可能存在“学生”和“教师”两种不同的权限。学生只能查看自己的成绩，而教师则可以查看全部学生的成绩。这种场景下，需要在路由中根据不同的权限添加不同的路由。
实现动态路由
我们可以使用 Vue.js 的路由插件 vue-router 来实现动态路由。以下是实现动态路由的步骤：
- 定义路由配置文件
我们首先需要在项目根目录下新建一个 routes.js 文件，并定义一些基础路由。例如：
// www.javascriptcn.com code example
// routes.js
import Home from './views/Home.vue';
import Grade from './views/Grade.vue';
import Login from './views/Login.vue';
const routes = [
{
path: '/',
component: Home,
meta: { requiresAuth: true },
},
{
path: '/login',
component: Login,
},
{
path: '/:id',
component: Grade,
meta: { requiresAuth: true },
},
];
export default routes;在这个文件中，我们定义了三个路由：Home、Login 和 Grade。其中，Home 和 Grade 都需要登录权限才能访问。这里用到了 meta 属性，表示这些路由需要登录权限，如果用户未登录，就会被 redirect 至登录页面。
- 动态添加路由
动态添加路由需要使用到 vue-router 的 addRoutes 方法。addRoutes 会将新的路由配置添加到现有的路由配置数组中，并更新路由映射表和组件渲染。以下是实现动态路由的代码：
// www.javascriptcn.com code example
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import routes from './routes';
Vue.use(Router);
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [],
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
const isAuthenticated = false; // 这里需要根据实际情况判断是否已登录
if (requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
export default router;
export const routerUpdate = (newRoutes) => {
router.matcher = new Router({ mode: 'history', routes: newRoutes }).matcher;
};该文件中，我们首先定义了常规的路由器，并监听了路由变化，在用户登录后根据用户的不同权限添加不同的路由。 routerUpdate 方法可以根据需求实现动态添加路由。
- 调用路由器
在我们的 Vue 实例中，需要通过引入路由插件和动态加载的路由器来为项目添加路由。以下是一个简单的例子：
// www.javascriptcn.com code example
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');什么是导航守卫？
在实际开发中，我们经常需要限制用户不能访问无关页面，并要求用户必须登录后才能访问受限页面。为了实现这种权限控制，我们可以使用导航守卫去过滤路由，并将用户路由到正确的页面。
实现导航守卫
我们可以使用 beforeRouteEnter 和 beforeRouteLeave 方法，实现导航守卫的功能。以下是一个例子：
// www.javascriptcn.com code example
// Grade.vue
export default {
data() {
return {
gradeList: [],
};
},
beforeRouteEnter(to, from, next) {
const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
if (requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
},
beforeRouteLeave(to, from, next) {
if (this.$route.meta.requiresSave) {
// 如果需要保存，就执行保存操作
this.save();
}
next();
},
methods: {
save() {
// 这里实现保存操作
},
},
};在这个例子中，我们定义了 beforeRouteEnter 和 beforeRouteLeave 方法分别实现路由进入和离开时的权限控制和保存操作。 beforeRouteEnter 会在用户进入该路由前首先执行，如果用户权限不足，会被导航至登陆页面；而 beforeRouteLeave 会在用户离开该路由前执行，用以实现一些保存、清理等操作。
结语
本文介绍了如何使用 Vue.js 实现动态路由和导航守卫功能。通过上述示例，我们可以根据不同的权限配置不同的页面和导航栏，并对路由进行控制，以便更好地保护用户数据安全。最后，希望本文能对您的开发工作有所帮助，也欢迎大家提出宝贵的意见和建议。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6781e869935627c900ef8130