>[success] # 安裝即使用 * 使用npm 安裝 ~~~ npm install vue-router@4 ~~~ >[danger] ##### 使用 1. 導入`import { createRouter} from 'vue-router' ` 創建 `router` 實例 2. 配置參數，其中`routes` 選項配置路由和組件映射關系，`history` 配置是`hash` 還是 `history` 模式 ~~~ import { createWebHashHistory, createWebHistory } from 'vue-router' history: createWebHashHistory(), // hash history: createWebHistory(), // history ~~~ 3. 將`router` 實例掛在到 `vue 根實例上` 4. 使用路由: 通過`<router-link>`和`<router-view>` * router/index.js ~~~ js import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ routes: [ { path: '/home', component: () => import('@/view/Home.vue'), }, { path: '/about', component: () => import('@/view/About.vue'), }, ], history: createWebHistory(), // 開啟history模式 }) export default router ~~~ * main.js ~~~ import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) // 綁定路由 app.mount('#app') ~~~ * App.vue ~~~ html <template> <router-link to="/home">home</router-link> <router-link to="/about">about</router-link> <router-view /> </template> <script setup></script> <style></style> ~~~ >[danger] ##### 掛載 使用 `app.use(router)` 后就可將`router `實例掛載到`vue `上，如果是 `option API` 可以使用`this.$router`的形式訪問它，并且以`this.$route`的形式訪問當前路由 ~~~ // Home.vue export default { computed: { username() { // 我們很快就會看到 `params` 是什么 return this.$route.params.username }, }, methods: { goToDashboard() { if (isAuthenticated) { this.$router.push('/dashboard') } else { this.$router.push('/login') } }, }, } ~~~ 使用的是 `Composition API ` 則可以使用` import { useRouter, useRoute } from 'vue-router'` 形式使用