npm install vue-router@4

// router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from '@/views/HomeView.vue'

// 創(chuàng)建路由規(guī)則
let routes = [
    {
        path: '/', // URL 地址
        name: 'home',  // 名稱
        component: HomeView  // 渲染該組件
    },
]

// 創(chuàng)建路由
const router = createRouter({
    // 使用 history 模式
    history: createWebHistory(),
    // 路由規(guī)則
    routes
})

// 將路由對(duì)象暴露出去
export default router
// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由模塊
let app = createApp(App)

app.use(router) // 初始化路由插件

app.mount('#app')

<template>
	<!--   路由鏈接，點(diǎn)擊是路由地址會(huì)切換到屬性 to 的地方   -->
    <router-link to="/">首頁</router-link>
    |
    <router-link to="/blog">博客</router-link>
    <hr>
	<!--   路由試圖，路由切換組件的地方   -->
    <router-view/>
</template>

// 路徑寫法
const routes = [{ path: '/home', redirect: '/' }]
// 命名寫法
const routes = [{ path: '/home', redirect: { name: 'home' } }]
]

// alias是別名的key
const routes = [{ path: '/', component: HomeView, alias: '/home' }]

// router/index.js

{
    path: '/father',
    name: 'father',
    component:  () => import('@/views/father.vue'),
    // 嵌套路由
    children: [
        {
            path: 'son', // path 前面不要加 /
            name: 'son',
            component: () => import('@/views/son.vue')
        },
    ]
}


// father.vue 頁面
<template>  
    <div class="school">
        我是 father 頁面：
        <router-link to="/father/son">子頁面</router-link>
        <hr>
		<!-- 該組件中自己的路由視圖 -->
        <router-view />
    </div>
</template>

// router/index.js
{
    path: '/father',
    name: 'father',
    component:  () => import('@/views/father.vue'),
    // 嵌套路由
    children: [
        {
            path: 'son/:id', // path 前面不要加 / （路徑傳參）
            name: 'son',
            component: () => import('@/views/son.vue'),
            props: true  // 將路徑參數(shù)傳遞到展示組件的 props 中
        },
    ]
}


// father.vue
<template>  
    <div class="school">
        我是 father 頁面：
        <router-link to="/father/son">子頁面</router-link>
        <hr>
		<!-- 該組件中自己的路由視圖 -->
        <router-view />
    </div>
</template>


// son.vue 選項(xiàng)式
<script>
export default {
    // 通過 props 來接收路徑參數(shù)
    props: { id: String },
    methods: {
        showRouteParams() {
            // 通過 `this.$route.params` 獲取路徑參數(shù)
            console.log(this.$route.params)
          	// 取出指定的路徑參數(shù)
            console.log(this.$route.params.id)
            // 輸出 props 中得到的路徑參數(shù)
            console.log("輸出 props 中得到的路徑參數(shù)：" + this.id)
        }
    }
}
</script>

<template>
    <div class="math">
        我是 BlogContent 頁面
        <ul>
            <li>通過 `this.$route.params` 獲取路徑參數(shù) -- {{ $route.params }}</li>
            <li>取出指定的路徑參數(shù) -- {{ $route.params.id }}</li>
            <li>輸出 props 中得到的路徑參數(shù) id -- {{ id }}</li>
        </ul>
        <button @click="showRouteParams">在 JS 中訪問路徑參數(shù)</button>
    </div>
</template>


// son.vue 組合式
<script setup>
import { useRoute } from 'vue-router'

// 通過 props 來接收路徑參數(shù)
let propsData = defineProps({ id: String })

// 獲取路由跳轉(zhuǎn)對(duì)象
let route = useRoute()

function showRouteParams() {
    console.log(route.params) // 通過 `route` 獲取路徑參數(shù)
    console.log(route.params.id) // 取出指定的路徑參數(shù)
    console.log("輸出 props 中得到的路徑參數(shù)：" + propsData.id)
}
</script>

<template>
    <div class="math">
        我是 BlogContent 頁面
        <ul>
            <li>通過 `route` 獲取路徑參數(shù) -- {{ route.params }}</li>
            <li>取出指定的路徑參數(shù)：{{ route.params.id }}</li>
            <li>輸出 props 中得到的路徑參數(shù) id -- {{ id }}</li>
        </ul>
        <button @click="showRouteParams">在 JS 中訪問路徑參數(shù)</button>
    </div>
</template>

// 編程式導(dǎo)航
const username = 'eduardo'

// 我們可以手動(dòng)建立 url，但我們必須自己處理編碼
router.push(`/user/${username}`) // -> /user/eduardo

// 同樣
router.push({ path: `/user/${username}` }) // -> /user/eduardo

// 如果可能的話，使用 `name` 和 `params` 從自動(dòng) URL 編碼中獲益（params名必須和 router規(guī)則中的名一致）
router.push({ name: 'user', params: { username } }) // -> /user/eduardo

// `params` 不能與 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

router.push({ path: '/home', replace: true })

// 相當(dāng)于
router.replace({ path: '/home' })

// 向前移動(dòng)一條記錄，與 router.forward() 相同
router.go(1)

// 返回一條記錄，與 router.back() 相同
router.go(-1)

// 前進(jìn) 3 條記錄
router.go(3)

// 如果沒有那么多記錄，靜默失敗
router.go(-100)
router.go(100)