Vue Router多层ID路径实现详解与最佳实践

Vue Router 中多层 ID 路径的实现

在 Vue.js 应用开发中，使用 Vue Router 管理路由是常见做法。有时，我们需要在 URL 中嵌入多个 ID 以表示层级关系，例如获取书籍信息及其作者信息时，URL 可能需要包含 bookId 和 authorId 两个参数。 本文探讨如何在 Vue Router 中实现多层 ID 路径，并提供几种解决方案。

嵌套路由

嵌套路由是一种清晰且结构化的方式，用于表达具有层级关系的数据。对于需要多层 ID 的场景，我们可以将具有关联关系的 ID 定义为嵌套路由的参数。

实现步骤：

1. 在路由配置中，使用 children 属性定义嵌套路由。
2. 将 bookId 定义为父路由的参数，authorId 定义为子路由的参数。

代码示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import BookView from '@/views/BookView.vue';
import AuthorView from '@/views/AuthorView.vue';

const routes = [
  {
    path: '/books/:bookId',
    name: 'Book',
    component: BookView,
    children: [
      {
        path: 'authors/:authorId',
        name: 'Author',
        component: AuthorView,
        props: true,
      }
    ]
  }
];

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

export default router;

组件中访问参数:

在 BookView 和 AuthorView 组件中，都可以通过 $route.params 访问对应的 ID。BookView 访问 bookId, AuthorView 访问 bookId 和 authorId。

<!-- AuthorView.vue -->
<template>
  <div>
    Book ID: {{ $route.params.bookId }}<br>
    Author ID: {{ $route.params.authorId }}
  </div>
</template>

路由跳转方式：

可以使用两种方式进行跳转:

• 使用对象形式的路由跳转：

  this.$router.push({ name: 'Author', params: { bookId: 123, authorId: 456 } });
  

• 使用字符串形式的路由跳转：

  this.$router.push(`/books/123/authors/456`);
  

这种方式通过定义嵌套路由，实现了清晰的路由层级结构，方便管理和维护。

组合参数

另一种方法是将多个 ID 组合在一个路由路径参数中，然后在组件中解析它们。这种方法更适合参数数量不固定或者层级关系不明显的场景。

实现步骤:

1. 定义一个包含所有 ID 的路径参数。
2. 在组件中，通过解析路径参数获取各个 ID 值。

代码示例：

// router/index.js
const routes = [
    {
      path: '/book-author/:bookId-:authorId',
      name: 'BookAuthor',
      component: () => import('@/views/BookAuthorView.vue'),
      props: true
    }
];

组件中解析参数:

在 BookAuthorView 组件中，通过 $route.params 获取组合参数，然后手动解析出 bookId 和 authorId。

<!-- BookAuthorView.vue -->
<template>
  <div>
    Book ID: {{ bookId }}<br>
    Author ID: {{ authorId }}
  </div>
</template>

<script>
export default {
  props: {
    bookIdAuthorId: {
      type: String,
      required: true
    }
  },
  computed: {
    bookId() {
      return this.bookIdAuthorId.split('-')[0];
    },
    authorId() {
      return this.bookIdAuthorId.split('-')[1];
    }
  }
};
</script>

路由跳转:

this.$router.push({ name: 'BookAuthor', params: { bookIdAuthorId: '123-456' } });
// 或
this.$router.push(`/book-author/123-456`);

安全性考虑：

由于该方法依赖于字符串分割，对用户输入需要进行严格校验，防止注入攻击。例如，校验输入是否符合预期的格式，并进行适当的编码处理。

补充说明：

这两种方法各有优缺点。嵌套路由方式结构清晰，易于理解和维护，适合有明确层级关系的场景。组合参数方式更灵活，可以处理参数数量不固定的情况，但需要在组件中进行额外的参数解析处理，代码可读性可能稍差，且需注意安全性问题。选择哪种方式取决于具体的应用场景和需求。开发者可以根据项目实际情况选择最合适的方案，保持路由定义清晰易懂，提升应用的可维护性。