vue3中怎么使用vue-router

Vue3中怎么使用vue-router

Vue Router 是 Vue.js 官方的路由管理器，它與 Vue.js 核心深度集成，使得構建單頁面應用（SPA）變得更加容易。在 Vue 3 中，Vue Router 也進行了相應的更新，以更好地支持 Vue 3 的新特性。本文將詳細介紹如何在 Vue 3 中使用 Vue Router。

1. 安裝 Vue Router

首先，你需要確保你的項目是基于 Vue 3 的。如果你還沒有創建 Vue 3 項目，可以使用 Vue CLI 來創建一個新的項目：

vue create my-vue3-app

在創建項目時，選擇 Vue 3 作為項目的 Vue 版本。

接下來，你需要安裝 Vue Router。你可以使用 npm 或 yarn 來安裝：

npm install vue-router@4

或者

yarn add vue-router@4

注意：Vue Router 4 是專門為 Vue 3 設計的，因此請確保安裝的是 vue-router@4。

2. 創建路由實例

安裝完成后，你需要在項目中創建一個路由實例。通常，我們會將路由配置放在一個單獨的文件中，例如 src/router/index.js。

首先，創建一個 src/router/index.js 文件，并添加以下代碼：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

在這個文件中，我們首先導入了 createRouter 和 createWebHistory 函數，這兩個函數是 Vue Router 4 中用來創建路由實例和路由歷史的。

然后，我們定義了一個 routes 數組，其中包含了兩個路由對象。每個路由對象都包含 path、name 和 component 屬性。path 是路由的路徑，name 是路由的名稱，component 是路由對應的組件。

接下來，我們使用 createRouter 函數創建了一個路由實例，并傳入了 history 和 routes 兩個參數。history 參數用于指定路由的歷史模式，這里我們使用了 createWebHistory 來創建一個基于 HTML5 History API 的路由歷史。routes 參數則是我們之前定義的路由數組。

最后，我們將路由實例導出，以便在其他地方使用。

3. 在 Vue 應用中使用路由

創建好路由實例后，我們需要在 Vue 應用中使用它。通常，我們會在 src/main.js 文件中引入路由實例，并將其掛載到 Vue 實例上。

打開 src/main.js 文件，并添加以下代碼：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

在這個文件中，我們首先導入了 createApp 函數、App 組件和 router 實例。然后，我們使用 createApp 函數創建了一個 Vue 應用實例，并通過 use 方法將路由實例掛載到應用上。最后，我們使用 mount 方法將應用掛載到 DOM 中的 #app 元素上。

4. 創建路由組件

在上面的路由配置中，我們引用了兩個組件：Home 和 About。接下來，我們需要創建這兩個組件。

首先，創建一個 src/views/Home.vue 文件，并添加以下代碼：

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the Home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

然后，創建一個 src/views/About.vue 文件，并添加以下代碼：

<template>
  <div>
    <h1>About</h1>
    <p>This is the About page.</p>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

這兩個組件非常簡單，分別顯示了一個標題和一段文字。你可以根據需要在這些組件中添加更多的內容和邏輯。

5. 在模板中使用路由

現在，我們已經配置好了路由，并且創建了對應的組件。接下來，我們需要在模板中使用路由。

打開 src/App.vue 文件，并添加以下代碼：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

在這個文件中，我們使用了 router-link 組件來創建導航鏈接。router-link 是 Vue Router 提供的一個組件，它用于生成導航鏈接，并且會自動處理路由的跳轉。

router-view 組件是 Vue Router 提供的另一個組件，它用于顯示當前路由對應的組件內容。當用戶點擊導航鏈接時，router-view 會根據當前的路由路徑動態地渲染對應的組件。

6. 動態路由

除了靜態路由外，Vue Router 還支持動態路由。動態路由允許你根據不同的參數來匹配不同的路由。

例如，假設我們有一個用戶詳情頁面，需要根據用戶的 ID 來顯示不同的用戶信息。我們可以使用動態路由來實現這個功能。

首先，在 src/router/index.js 文件中添加一個新的路由：

{
  path: '/user/:id',
  name: 'User',
  component: () => import('../views/User.vue'),
}

在這個路由中，我們使用了 :id 作為動態參數。當用戶訪問 /user/1 或 /user/2 時，Vue Router 會根據 :id 的值來匹配這個路由。

接下來，創建一個 src/views/User.vue 文件，并添加以下代碼：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <p>This is the user detail page for user {{ $route.params.id }}.</p>
  </div>
</template>

<script>
export default {
  name: 'User',
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

在這個組件中，我們使用了 $route.params.id 來獲取動態路由參數 id 的值，并將其顯示在頁面上。

7. 嵌套路由

Vue Router 還支持嵌套路由。嵌套路由允許你在一個路由組件中嵌套另一個路由組件。

例如，假設我們有一個用戶詳情頁面，并且在用戶詳情頁面中還有一個子頁面用于顯示用戶的帖子。我們可以使用嵌套路由來實現這個功能。

首先，在 src/router/index.js 文件中修改 User 路由，添加一個 children 屬性：

{
  path: '/user/:id',
  name: 'User',
  component: () => import('../views/User.vue'),
  children: [
    {
      path: 'posts',
      component: () => import('../views/UserPosts.vue'),
    },
  ],
}

在這個路由中，我們添加了一個 children 數組，其中包含了一個子路由。這個子路由的路徑是 posts，對應的組件是 UserPosts.vue。

接下來，創建一個 src/views/UserPosts.vue 文件，并添加以下代碼：

<template>
  <div>
    <h2>User Posts</h2>
    <p>This is the posts page for user {{ $route.params.id }}.</p>
  </div>
</template>

<script>
export default {
  name: 'UserPosts',
};
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

在這個組件中，我們簡單地顯示了一個標題和一段文字。

最后，在 src/views/User.vue 文件中添加一個 router-view 組件，用于顯示子路由的內容：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <p>This is the user detail page for user {{ $route.params.id }}.</p>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'User',
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

現在，當用戶訪問 /user/1/posts 時，UserPosts 組件將會被渲染在 User 組件中的 router-view 位置。

8. 導航守衛

Vue Router 提供了導航守衛功能，允許你在路由跳轉前或跳轉后執行一些邏輯。導航守衛可以用于權限控制、數據預取等場景。

Vue Router 提供了三種導航守衛：

• 全局前置守衛：在路由跳轉前執行。
• 全局解析守衛：在路由跳轉前執行，但在所有組件內守衛和異步路由組件被解析之后。
• 全局后置鉤子：在路由跳轉后執行。

例如，我們可以使用全局前置守衛來檢查用戶是否登錄：

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 假設 checkAuth 是一個檢查用戶是否登錄的函數
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

在這個例子中，我們使用 router.beforeEach 方法注冊了一個全局前置守衛。在每次路由跳轉前，這個守衛都會檢查用戶是否登錄。如果用戶未登錄且目標路由不是登錄頁面，則重定向到登錄頁面。

9. 路由懶加載

為了提高應用的性能，Vue Router 支持路由懶加載。路由懶加載允許你將路由對應的組件按需加載，而不是在應用啟動時一次性加載所有組件。

在 Vue Router 4 中，你可以使用 import 函數來實現路由懶加載：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
];

在這個例子中，我們使用 import 函數來動態導入組件。當用戶訪問 / 或 /about 時，對應的組件才會被加載。

10. 總結

在 Vue 3 中使用 Vue Router 非常簡單。首先，你需要安裝 Vue Router 4，然后創建一個路由實例并配置路由。接下來，你可以在 Vue 應用中使用路由，并通過 router-link 和 router-view 組件來實現導航和路由內容的渲染。

Vue Router 還支持動態路由、嵌套路由、導航守衛和路由懶加載等高級功能，這些功能可以幫助你構建更加復雜和高效的單頁面應用。

希望本文能夠幫助你更好地理解和使用 Vue Router 4。如果你有任何問題或建議，歡迎在評論區留言。