目錄

一、路由配置

1. 基本路由配置

2. 動態路由配置

3. 可選參數配置

二、路由跳轉與傳參

1. 聲明式導航 (模板中)

2. 編程式導航 (JavaScript中)

三、參數接收

1. 接收動態路由參數

2. 接收查詢參數

3. 監聽參數變化

四、高級用法

1. 路由元信息

2. 路由守衛控制

3. 動態添加路由

五、完整示例

路由配置示例

組件使用示例

---

一、路由配置

1. 基本路由配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue')},{path: '/about',name: 'About',component: () => import('@/views/About.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router

2. 動態路由配置

const routes = [// 動態段以冒號開始{path: '/user/:id',name: 'User',component: () => import('@/views/User.vue')},// 多個動態參數{path: '/post/:postId/comment/:commentId',name: 'PostComment',component: () => import('@/views/PostComment.vue')}
]

3. 可選參數配置

{path: '/user/:id?',  // 問號表示可選name: 'UserOptional',component: () => import('@/views/UserOptional.vue')
}

二、路由跳轉與傳參

1. 聲明式導航 (模板中)

<!-- 基本跳轉 -->
<router-link to="/about">關于我們</router-link><!-- 動態路由傳參 -->
<router-link :to="'/user/' + userId">用戶主頁</router-link>
<router-link :to="{ name: 'User', params: { id: userId } }">用戶主頁</router-link><!-- 查詢參數傳參 -->
<router-link :to="{ path: '/search', query: { keyword: 'vue' } }">搜索</router-link>

2. 編程式導航 (JavaScript中)

import { useRouter } from 'vue-router'const router = useRouter()// 1. 動態路由傳參
router.push('/user/123')  // 路徑方式
router.push({ name: 'User', params: { id: 123 } })  // 命名路由方式// 2. 查詢參數傳參
router.push({path: '/search',query: {keyword: 'vue',page: 1}
})// 3. 替換當前路由 (不保留歷史記錄)
router.replace({ path: '/login' })// 4. 前進/后退
router.go(1)  // 前進
router.go(-1) // 后退

三、參數接收

1. 接收動態路由參數

import { useRoute } from 'vue-router'const route = useRoute()// 接收單個參數
const userId = route.params.id// 接收多個參數
const postId = route.params.postId
const commentId = route.params.commentId// 可選參數處理
const optionalId = route.params.id || 'default'

2. 接收查詢參數

import { useRoute } from 'vue-router'const route = useRoute()// 獲取查詢參數
const keyword = route.query.keyword
const page = Number(route.query.page) || 1  // 帶類型轉換和默認值// 處理數組參數 (如 ?tags=vue&tags=js)
const tags = Array.isArray(route.query.tags) ? route.query.tags : [route.query.tags].filter(Boolean)

3. 監聽參數變化

import { watch } from 'vue'
import { useRoute } from 'vue-router'const route = useRoute()// 監聽動態參數變化
watch(() => route.params.id,(newId) => {console.log('用戶ID變化:', newId)fetchUserData(newId)}
)// 監聽查詢參數變化
watch(() => route.query,(newQuery) => {console.log('查詢參數變化:', newQuery)},{ deep: true }
)

四、高級用法

1. 路由元信息

// 路由配置
{path: '/admin',name: 'Admin',component: () => import('@/views/Admin.vue'),meta: {requiresAuth: true,role: 'admin'}
}// 組件中獲取
const route = useRoute()
const requiresAuth = route.meta.requiresAuth

2. 路由守衛控制

router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next({path: '/login',query: { redirect: to.fullPath }})} else {next()}
})

3. 動態添加路由

// 添加單個路由
router.addRoute({path: '/new-route',name: 'NewRoute',component: () => import('@/views/NewRoute.vue')
})// 添加嵌套路由
router.addRoute('Admin', {path: 'settings',name: 'AdminSettings',component: () => import('@/views/AdminSettings.vue')
})

五、完整示例

路由配置示例

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue')},{path: '/product/:id',name: 'Product',component: () => import('@/views/Product.vue'),props: true // 將params作為props傳遞},{path: '/search',name: 'Search',component: () => import('@/views/Search.vue')},{path: '/login',name: 'Login',component: () => import('@/views/Login.vue'),meta: {guestOnly: true}}
]const router = createRouter({history: createWebHistory(),routes
})// 全局路由守衛
router.beforeEach((to, from, next) => {const isAuth = localStorage.getItem('token')if (to.meta.guestOnly && isAuth) {next({ name: 'Home' }) // 已登錄用戶不能訪問登錄頁} else {next()}
})export default router

組件使用示例

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { onMounted, watch } from 'vue'const router = useRouter()
const route = useRoute()// 編程式導航
const navigateToProduct = (id) => {router.push({name: 'Product',params: { id },query: { from: 'home' }})
}// 接收參數
const productId = route.params.id
const searchQuery = route.query.q// 監聽參數變化
watch(() => route.params.id,(newId) => {console.log('產品ID變化:', newId)fetchProduct(newId)}
)// 接收props形式的參數 (需要路由配置 props: true)
const props = defineProps({id: String
})
</script><template><div><!-- 聲明式導航 --><router-link :to="{ name: 'Product', params: { id: 123 }, query: { from: 'home' } }">產品123</router-link><!-- 編程式導航按鈕 --><button @click="navigateToProduct(456)">查看產品456</button><!-- 顯示當前路由參數 --><p>當前產品ID: {{ productId }}</p><p v-if="route.query.q">搜索詞: {{ searchQuery }}</p></div>
</template>

總結

1. 路由配置：使用?createRouter?創建路由，createWebHistory?創建歷史模式

2. 動態路由：使用?:param?語法定義動態段

3. 跳轉方式：

   • 聲明式：<router-link>

   • 編程式：router.push()/router.replace()

4. 傳參方式：

   • 動態參數：params

   • 查詢參數：query

5. 參數接收：使用?useRoute()?獲取當前路由信息

6. 高級功能：路由守衛、元信息、動態路由添加等

按照這些方法，可以靈活地在 Vue3 項目中實現各種路由需求。