Vue vue-router动态添加和删除路由（附带实例）

在路由配置完成后，还能动态地添加新的路由项或删除指定的路由项吗？答案是可以，vue-router 模块能够帮开发者搞定！

假设项目中有一个模块是产品列表页，而这个模块只有在点击其他菜单项或按钮后，才会动态地加入当前的静态路由表中，并进行对应的路由跳转等常规操作，如果不想让这个路由起作用，则可以点击按钮将该路由对象从静态路由表中删除。那么，这一系列的操作目标应该如何实现呢？

下面分 4 步来实现：
1) 在 views 目录下新建一个 Products.vue 产品列表页，并指定一个简单的示意模板。此时文件结构如下图所示：

图 1 文件结构

此时 views/Products.vue 文件代码如下：

<template>
  <div>
    产品
  </div>
</template>

2) 在导航菜单组件中添加一个指向产品的路由链接。在用户登录后，点击产品链接，则会显示 404 页面。

读者可能会疑惑，为什么需要先进行用户登录呢？这是因为不登录就不能查看除首页外的其他页面。那为什么会显示 404 页面呢？这是因为在路由表中并没有配置 products（产品）路由指向的路由对象。

此时 components/Header.vue 文件代码如下：

<template>
  <header class="d-flex flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
    <router-link to="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
      <span class="fs-4">Vue 路由</span>
    </router-link>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <router-link to="/" class="nav-link">首页</router-link>
      </li>
      <li class="nav-item">
        <router-link to="/users" class="nav-link">用户</router-link>
      </li>
      <li class="nav-item">
        <router-link to="/products" class="nav-link">产品</router-link>
      </li>
    </ul>
    <div class="dropdown text-end">
      <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        <img src="@/assets/logo.png" alt="mdo" width="32" height="32" class="rounded-circle" />
      </a>
      <ul class="dropdown-menu text-small">
        <li>
          <a href="#" class="dropdown-item" @click="login">用户登录</a>
        </li>
        <li>
          <a href="#" class="dropdown-item" @click="logout">退出登录</a>
        </li>
      </ul>
    </div>
  </header>
</template>

<script setup>
const login = () => {
  localStorage.setItem('loggedin', true);
};

const logout = () => {
  localStorage.removeItem('loggedin');
};
</script>

3) 在下拉菜单中添加两个新的菜单项：

一个是“动态添加产品列表页”；
另一个是“动态删除产品列表页”。

这两个菜单项需要分别进行 addProductsRoute 与 removeProductsRoute 这两个不同的事件监听操作。添加的代码如下：

<li><a href="javascript:void(0)" class="dropdown-item" @click="addProductsRoute">
  动态添加产品列表页</a></li>
<li><a href="javascript:void(0)" class="dropdown-item" @click="removeProductsRoute">
  动态删除产品列表页</a></li>

4) 从 vue-router 模块中引入 useRouter 钩子函数并得r outer 对象后，在 addProductsRoute 函数中进行如下 3 步操作。

如果路由器中已经存在 products 路由，则直接跳转到产品列表页。这样做的目的是不需要重复执行非必要的代码内容。需要注意的是，是否已经存在 products 路由，需要通过动态添加的路由对象的 name 属性名称来判断；
如果路由器中不存在 products 路由，则需要将产品列表页等路由组件动态引入，利用 addRoute 函数添加动态路由。而在添加的过程中 name 属性是一个重点，强烈建议定义 name 属性名称，因为判断是否存在某个路由，以及动态添加或删除某个路由都是通过 name 属性来完成的，而在添加完路由后可以直接跳转到产品列表页；
动态删除路由 removeProductsRoute 的操作，也是通过路由名称来实现的，删除成功后跳转到首页即可。

此时 components/Header.vue 文件代码如下：

<template>
  <header class="d-flex flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
    ...
    ...
    <div class="dropdown text-end">
      <ul class="dropdown-menu text-small">
      ...
      ...
        <li>
          <a href="javascript:void(0)" class="dropdown-item" @click="addProductsRoute">
            动态添加产品列表页</a>
        </li>
        <li>
          <a href="javascript:void(0)" class="dropdown-item" @click="removeProductsRoute">
            动态删除产品列表页</a>
        </li>
      </ul>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router';
...
...
const router = useRouter();

// 动态添加 products 路由
const addProductsRoute = () => {
  // 如果路由器中已经存在 products 路由，则直接跳转到产品列表页
  if (router.hasRoute('products')) {
    router.push('/products');
    return;
  }
  // 如果不存在，则需要将产品列表等路由组件进行动态引入
  // 然后利用 addRoute 函数添加动态路由
  const Header = () =>
    import(/* webpackChunkName: "group-comp" */ '@/components/Header');
  const Footer = () =>
    import(/* webpackChunkName: "group-comp" */ '@/components/Footer');
  const Products = () =>
    router.addRoute({
    name: 'products',
    path: '/products',
    components: {
      default: Products,
      'router-view-header': Header,
      'router-view-footer': Footer,
    },
  });
  router.push('/products');
};

// 动态删除 products 路由
const removeProductsRoute = () => {
  // 根据 products 路由的名称来删除它
  router.removeRoute('products');
  // 跳转到首页
  router.push('/');
};
</script>

重新测试页面。在用户登录状态下，首先点击产品链接，显示 404 页面。然后点击下拉菜单中的“动态添加产品列表页”菜单项，将会成功跳转到产品列表页，并显示产品列表页内容。而如果再次点击下拉菜单中的“动态删除产品列表页”菜单项，则会直接后退到项目首页，并且再次点击产品链接，又将显示 404 页面。

Vue vue-router动态添加和删除路由（附带实例）

相关文章