Uniapp 中动态添加与删除路由的方法

在 Uniapp 开发中，动态添加与删除路由能够让应用的页面导航逻辑更加灵活，以适应多样化的业务场景。下面我们就来深入探讨这一关键技术。

动态添加路由

在 Uniapp 里，动态添加路由可借助 Vue.use(VueRouter) 与 new Router() 来实现。在项目的 router 目录下找到 index.js 文件。假设我们有一个根据用户权限动态展示不同页面的需求。

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

const router = new Router({
  routes: [
    // 基础路由
    {
      path: '/home',
      name: 'home',
      component: () => import('@/pages/home/home.vue')
    }
  ]
});

// 动态添加路由函数
export function addDynamicRoutes(permissionRoutes) {
  permissionRoutes.forEach(route => {
    router.addRoute(route);
  });
}

export default router;

在上述代码中，我们定义了一个 addDynamicRoutes 函数，它接收一个包含动态路由配置的数组。在实际业务中，我们可以在用户登录成功，获取到权限信息后，调用这个函数添加相应的路由。例如：

import { addDynamicRoutes } from '@/router/index';
const userPermissions = getUserPermissions(); // 获取用户权限
const permissionRoutes = generatePermissionRoutes(userPermissions); // 根据权限生成路由
addDynamicRoutes(permissionRoutes);

动态删除路由

动态删除路由相对复杂一些。在 Uniapp 中，并没有直接的 API 来删除路由。不过，我们可以通过重置路由表来实现类似效果。

export function resetRouter() {
  const newRouter = new Router({
    routes: []
  });
  router.matcher = newRouter.matcher;
}

在需要删除路由的地方，调用 resetRouter 函数即可。比如，当用户退出登录时，我们可能需要清除之前根据权限添加的路由：

import { resetRouter } from '@/router/index';
// 用户退出登录逻辑
resetRouter();

掌握 Uniapp 中动态添加与删除路由的方法，能极大提升应用的灵活性与扩展性。无论是根据用户权限动态展示页面，还是在特定操作下重置路由，都能为用户带来更流畅、个性化的体验。通过合理运用这些技术，开发者可以更好地应对复杂多变的业务需求，打造出高质量的 Uniapp 应用。