您现在的位置是：首页 >技术交流 >Vue Router 动态路由网站首页技术交流

动态路由（Dynamic Routing）允许在同一个路由下渲染多个路由组件,其主要特征是动态路径参数。

像 /user/:id 这样的动态路径,id 是动态路径参数。我们可以在同一个路由下根据参数渲染不同的内容。

初始化项目

这些基本步骤可以在 Vue CLI 创建的项目中使用和开发 Vue Router。

$ npm init vue@latest
Vue.js - The Progressive JavaScript Framework

√ Project name: ... ftest
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes # 选Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

下面使用组合式API(Composition API) 实现动态路由的一个小例子。

动态路由示例

• App.vue

<template>
  <router-view></router-view> 
</template>

• main.js

import './assets/main.css'
import router from './router'

import { createApp } from 'vue'
import App from './App.vue'

const app=createApp(App)
app.use(router)
app.mount('#app')

• router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../App.vue'
import Posts from '../components/Posts.vue'
const routes = [
  { 
    path: '/', 
    component: Home },
  {
    path: '/posts/:id', 
    component: Posts,
    props: true 
  }
]

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

export default router

• Posts.vue

<script setup>
    import Post from './Post.vue'
</script>

<template>
    <div>
        <Post v-bind="$route.params" />
    </div>
</template>

<style scoped></style>

• Post.vue

<script setup>
// defineProps() 来声明接收的 props。
defineProps({
    id: Number
})
</script>

<template>
    <div>
        Post {{ id }}
    </div>  
</template>

<style scoped>

</style>

整体示例达到的效果是：

• 定义动态路由 /posts/:id。
• 通过 props: true 将 id 参数传递给 Posts 组件。
• Posts 将其传递给 Post 子组件。
• Post 渲染 id props, 所以当访问 /posts/1 时,最终渲染 Post 1

这是一个使用 Vue 3 组合式 API 实现动态路由的简单示例。我们可以看到,逻辑变得更加简洁,通过直接在 <script setup> 中声明数据和方法,不需要定义 export default 等结构。

如果您的项目使用 Vue 3,推荐尽量使用组合式 API 来开发。它可以以一种更简洁和灵活的方式来组织组件逻辑。