VUE3入門開發：使用Vue-Router實現頁面跳轉

Vue 3是當下最受歡迎的JavaScript框架之一，用於建立互動式的使用者介面。 Vue-Router是Vue框架的一個插件，用於實現單一頁面應用程式中的路由管理。在本文中，我們將介紹如何使用Vue-Router在Vue 3中實現頁面跳躍。

一、安裝和設定Vue-Router

在開始之前，確保你已經安裝了Vue 3。如果還沒有安裝，可以參考官方文件進行安裝：https://v3.cn.vuejs.org/guide/installation.html。

安裝Vue-Router:

在終端機中，執行下列指令進行安裝：

npm install vue-router@4.0.0-alpha.13

在Vue 3中，Vue-Router的版本應該不會低於4.0. 0-alpha.13。

在安裝Vue-Router之後，我們需要在Vue 3應用程式中設定Vue-Router。建立一個routes.js檔案：

import Home from '@/components/Home'
import About from '@/components/About'

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

在這個檔案中，我們定義了兩個路由，一個是主頁（Home），另一個是關於我們（About）頁面。

我們還需要在Vue 3應用程式的入口檔案（main.js）中匯入Vue-Router並進行設定：

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp(App)

app.use(router)

app.mount('#app')

在這個檔案中，我們透過createRouter函數建立了一個router實例，並使用createWebHistory函數來建立router的模式。我們也將routes傳遞給router實例。

在Vue 3中，我們使用app.use()方法將Vue-Router外掛程式安裝到Vue應用程式中。最後，將app.mount()方法放到app.use()方法之後，這確保Vue-Router已經正確安裝並且應用程式能夠正常運作。

二、實作頁面跳轉

現在，我們已經成功地安裝並設定了Vue-Router，接下來我們將使用Vue-Router來實現頁面跳躍。

1. 在App.vue檔案中加入路由連結：

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

在這個模板中，我們使用b988a8fd72e5e0e42afffd18f951b277元件來建立路由鏈接，指定to屬性為路由路徑。

2. 在Home.vue和About.vue中加入內容

#我們為Home和About頁面建立了兩個Vue元件，我們需要在這些元件的範本中加入一些內容來驗證頁面是否正常跳轉。

Home.vue:

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page</p>
  </div>
</template>

About.vue:

<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the about page</p>
  </div>
</template>

現在，我們已經成功地設定了路由連結和頁面內容。我們可以使用這些連結進行頁面跳轉。

三、總結

在本文中，我們了解如何使用Vue-Router在Vue 3中實現頁面跳躍。首先，我們安裝並設定Vue-Router。然後，我們使用b988a8fd72e5e0e42afffd18f951b277元件建立路由連結。最後，我們在元件模板中新增內容來驗證頁面是否跳轉成功。

Vue-Router有很多其他功能，例如動態路由，嵌套路由，路由守衛等等。透過精通這些功能，你可以創建複雜的單頁面應用程序，並在應用程式中使用跳轉和導航。

以上是VUE3入門開發：使用Vue-Router實現頁面跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！