1. 概述

Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度整合，讓用 Vue.js 構建單頁應用變得輕而易舉。功能包括：

• 巢狀路由對映
• 動態路由選擇
• 模組化、基於元件的路由配置
• 路由引數、查詢、萬用字元
• 展示由 Vue.js 的過渡系統提供的過渡效果
• 細緻的導航控制
• 自動啟用 CSS 類的連結
• HTML5 history 模式或 hash 模式
• 可定製的滾動行為
• URL 的正確編碼

2. 安裝

2.1.直接下載 / CDN

Unpkg.com 提供了基於 npm 的 CDN 連結：

<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
 

2.2. NPM

[root@DESKTOP-MSD7I5A hello-world]# npm install vue-router@4

• 注意：hello-world是我們使用vue\cli建立的一個專案 ，vue版本為3.x

3. 測試

3.1. 刪除模板檔案

建立的模板裡具有HelloWorld、logo的我們不需要的檔案或元件，刪除

3.2. 編寫自己的元件

定義一個Content.vue 和Main.vue的元件，在components 目錄下存放我們自己編寫的元件

Content.vue

<template>
    <div>
        <h1>內容頁</h1>
    </div>
</template>

<script>
export default {
    name:"ContentP"
}
</script>

<style>

</style>
 

Main.vue

<template>
  <div>
      <h1>首頁</h1>
  </div>
</template>

<script>
export default {
    name: "MainPage"
}
</script>

<style>

</style>

3.3. 安裝路由

在src目錄下，新建一個資料夾：router，專門存放路由，配置路由index.js，如下

// import Vue from 'vue'
// import Router from 'vue-router' //匯入路由外掛
import { createRouter,createWebHistory } from "vue-router"
import Main from '../components/Main'  //匯入首頁
import Content from '../components/Content'  //匯入首頁

// Vue.use(Router);  //安裝路由

export default new createRouter({ //配置路由
    routes: [
        {
            //路由路徑
            path: '/content',
            //路由名稱
            name: 'content',
            //跳轉到元件
            component: Content
        }, {
            path: '/main',
            name: 'main',
            component: Main
        }
    ],
    // 採用 history 模式
    history: createWebHistory(),
})
 

3.4. 配置路由

在main.js中配置路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' //自動掃描裡面的路由配置

// createApp(App).mount('#app')
createApp(App).use(router).mount('#app')

3.5. 使用路由

在App.vue中使用路由

<template>
	<div id="app">
		<!--
			router-link：預設會被渲染成一個<a>標籤，to屬性為指定連結
			router-view：用於渲染路由匹配到的元件
		-->
		<router-link to="/">首頁</router-link> | 
		<router-link to="/content">內容</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
	export default{
		name:'App'
	}
</script>

<style></style>

3.6. 結果

執行npm run serve，開啟瀏覽器：

4. 遇到的問題

[1]"export 'default' (imported as 'VueRouter') was not found in 'vue-router' - 簡書 (jianshu.com)

[2]Uncaught TypeError: Cannot read property ‘use‘ of undefined：Vue3.0 - 安裝路由 vue-router_Jie_1997的部落格-CSDN部落格_vue下載路由

[3]一次尷尬的vue-router的bug. Invalid route component at extractComponentsGuards - 小白小承 - 部落格園 (cnblogs.com)

[4]vue/multi-word-component-names | eslint-plugin-vue (vuejs.org)

5. 參考資料

[1]安裝 | Vue Router (vuejs.org)

[2]Vue課堂筆記/09vue-router路由.md · 盧澤華/Vue - 碼雲 - 開源中國 (gitee.com)