vue路由的动态生成

Vue Router 是 Vue.js 应用程序中的路由系统，它允许你定义 URL 到组件的映射，并提供导航、组件复用和状态管理等功能。动态路由是在 URL 中包含变量，这些变量可以在路由配置中被捕获并传递给组件。

动态路由在 Vue Router 中是通过使用冒号 `:` 来定义动态路径部分。例如，假设你有一个博客应用，每个文章都有一个 ID，你可以这样配置动态路由：

// 在路由配置文件中
const routes = [
  {
    path: '/posts/:postId', // 通配符 :postId 表示动态参数
    component: PostComponent,
  },
];

在这个例子中，`:postId` 是一个动态路径部分，当你访问 `/posts/123` 这样的 URL 时，`postId` 将被设置为 `123`，并在 `PostComponent` 组件接收到这个值。

在组件内部，你可以通过 `this.$route.params.postId` 访问到这个动态参数的值：

export default {
  computed: {
    postId() {
      return this.$route.params.postId;
    },
  },
};

动态路由的使用场景包括根据用户输入、数据库查询结果或任何需要动态数据的场景来创建可变的 URL。