什么是Vue-Router？

Vue路由器是Vue.js的官方路由器，它與Vue.js核心深度集成，使用Vue輕松構(gòu)建單頁應(yīng)用程序變得輕而易舉。功能包括：

• 嵌套路線映射

• 動態(tài)路由

• 模塊化，基于組件的路由器配置

• 路由參數(shù)，查詢，通配符

• 查看由Vue.js過渡系統(tǒng)提供動力的過渡效果

• 細(xì)粒度的導(dǎo)航控制

• 帶有自動活動CSS類的鏈接

• HTML5歷史記錄模式或哈希模式

• 可自定義的滾動行為

• 網(wǎng)址的正確編碼

路由的核心：改變Url，但頁面不進(jìn)行整體刷新 ，路由理解為指向

路由表，是一個映射表，一個路由就是一組映射關(guān)系。

形式: key : value key：表示路由 value：可為function（后臺路由）或為 Component（組件）

安裝：

直接下載 / CDN#

https://unpkg.com/vue-router@4

Unpkg.com 提供了基于 npm 的 CDN 鏈接。上述鏈接將始終指向 npm 上的最新版本。 你也可以通過像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 這樣的 URL 來使用特定的版本或 Tag。

npm

npm install vue-router@4

yarn

yarn add vue-router@4

安裝成功后，會在package.json 中顯示出來

使用 例子：

一、創(chuàng)建一個文件夾router 新建一個js文件來 進(jìn)行路由集中管理

在新建一個views來存儲組件

組件代碼：

<template><div>這是Login組件</div>
</template>

app.vue首頁

注意：

router-link#

請注意，我們沒有使用常規(guī)的 a 標(biāo)簽，而是使用一個自定義組件 router-link 來創(chuàng)建鏈接。這使得 Vue Router 可以在不重新加載頁面的情況下更改 URL，處理 URL 的生成以及編碼。我們將在后面看到如何從這些功能中獲益。

router-view#

router-view 將顯示與 url 對應(yīng)的組件。你可以把它放在任何地方，以適應(yīng)你的布局。

<script setup></script><template><h1>Hello App!</h1><p><!--使用 router-link 組件進(jìn)行導(dǎo)航 --><!--通過傳遞 `to` 來指定鏈接 --><!--`<router-link>` 將呈現(xiàn)一個帶有正確 `href` 屬性的 `<a>` 標(biāo)簽--><router-link to="/Login">Go to Home</router-link></p><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view>
</template><style></style>

在路由js進(jìn)行配置

import {createRouter,createWebHashHistory }  from 'vue-router'// 1. 定義路由組件.
// 也可以從其他文件導(dǎo)入
import Login from '../views/Login.vue'// 2. 定義一些路由
// 每個路由都需要映射到一個組件。
// 我們后面再討論嵌套路由。
const routes = [{ path: '/Login', component: Login },
]// 3. 創(chuàng)建路由實例并傳遞 `routes` 配置
// 你可以在這里輸入更多的配置，但我們在這里
// 暫時保持簡單
const router = createRouter({// 4. 內(nèi)部提供了 history 模式的實現(xiàn)。為了簡單起見，我們在這里使用 hash 模式。history: createWebHashHistory(),routes, // `routes: routes` 的縮寫
})//導(dǎo)出router
export  default  router;

在main.js 進(jìn)行配置

vue-router帶參的動態(tài)路由配置

新建一個路由

app.vue

如果想要這個參數(shù)顯示出來要使用 $route

看看$route 這個里面包含著什么

可以看出從里面取得了鏈接等信息

在看看在組合api setup里怎么獲取 通過 import { useRoute } from 'vue-router'

<template><div>這是首頁</div>
</template>
<script setup>import { useRoute } from 'vue-router'console.log(useRoute())
</script>