vue动态路由

### 动态路由配置方法及使用示例 在 Vue.js 应用中，动态路由的配置主要通过 `vue-router` 提供的功能实现。动态路由通常用于处理具有可变部分的路径，例如用户详情页 `/user/:id` 或文章详情页 `/article/:slug`。在这些场景下，路径中的某些部分是动态变化的，而不是固定的。 #### 配置动态路由 动态路由的定义方式与静态路由类似，但需要在路径中包含参数占位符。参数占位符以冒号 `:` 开头，表示该部分为动态内容。以下是一个典型的动态路由配置示例： ```javascript import { createRouter, createWebHistory } from 'vue-router' import UserDetail from '../views/UserDetail.vue' const routes = [ { path: '/user/:id', // :id 是动态参数 name: 'UserDetail', component: UserDetail } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 在上述代码中，`/user/:id` 表示一个动态路由，其中 `:id` 是一个参数名。当用户访问类似 `/user/123` 的 URL 时，`id` 参数的值会被解析为 `"123"`，并且可以通过 `$route.params.id` 在组件中访问。 #### 使用动态路由参数 在组件中，可以通过 `useRoute` 函数（在组合式 API 中）或 `this.$route`（在选项式 API 中）来获取当前路由的信息。以下是一个使用动态路由参数的示例： ```vue <template> <div> <h1>用户详情</h1> <p>用户ID: {{ userId }}</p> </div> </template> <script setup> import { useRoute } from 'vue-router' import { ref, onMounted } from 'vue' const route = useRoute() const userId = ref('') onMounted(() => { userId.value = route.params.id }) </script> ``` 在这个例子中，`userId` 被绑定到 `route.params.id`，从而可以显示当前用户的 ID。如果用户访问 `/user/456`，页面将显示 `用户ID: 456`。 #### 嵌套路由与动态路由结合使用 动态路由也可以与其他高级功能如嵌套路由结合使用。嵌套路由允许在一个父组件中渲染子路由的内容，适用于构建具有层级结构的应用程序。以下是一个结合动态路由和嵌套路由的示例： ```javascript import { createRouter, createWebHistory } from 'vue-router' import UserProfile from '../views/UserProfile.vue' import UserPosts from '../views/UserPosts.vue' import UserSettings from '../views/UserSettings.vue' const routes = [ { path: '/user/:id', component: UserProfile, children: [ { path: 'posts', component: UserPosts }, { path: 'settings', component: UserSettings } ] } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 在这个配置中，`/user/:id` 是一个动态路由，其子路由包括 `/user/:id/posts` 和 `/user/:id/settings`。每个子路由对应的组件将在 `UserProfile` 组件内的 `<router-view>` 中渲染。 #### 动态添加路由 除了在初始化时定义所有路由外，还可以在运行时动态添加新的路由。这在某些情况下非常有用，例如根据用户权限加载不同的路由配置。以下是动态添加路由的示例： ```javascript router.addRoute({ path: '/admin/:page', name: 'Admin', component: () => import('../views/Admin.vue') }) ``` 通过调用 `addRoute` 方法，可以在应用运行期间随时添加新的路由规则。新添加的路由会立即生效，并且可以在后续的导航中被匹配到。 #### 处理多个动态参数 除了单个动态参数外，还可以在同一个路径中定义多个动态参数。例如，`/user/:userId/post/:postId` 可以用于表示某个用户的具体帖子。在这种情况下，可以通过 `$route.params.userId` 和 `$route.params.postId` 分别访问两个参数的值。 ```javascript const routes = [ { path: '/user/:userId/post/:postId', component: PostDetail } ] ``` 在组件中，可以这样访问这两个参数： ```vue <template> <div> <h1>帖子详情</h1> <p>用户ID: {{ userId }}</p> <p>帖子ID: {{ postId }}</p> </div> </template> <script setup> import { useRoute } from 'vue-router' import { ref, onMounted } from 'vue' const route = useRoute() const userId = ref('') const postId = ref('') onMounted(() => { userId.value = route.params.userId postId.value = route.params.postId }) </script> ``` 通过这种方式，可以灵活地处理复杂的 URL 结构，并根据不同的参数值展示相应的内容。 --- ###