Vue3中的路由函數詳解：實現SPA應用的路由跳轉-Vue.js-PHP中文網

Vue3中的路由函數詳解：實現SPA應用的路由跳轉

WBOY

發布： 2023-06-18 11:19:46

原創

2303 人瀏覽過

Vue3是目前最新的Vue版本，其路由函數相比較Vue2版本發生了較大的變化。作為實現單頁應用（SPA）的重要工具之一，Vue3中的路由函數應用十分廣泛。在本文中，我們將詳細講解Vue3中的路由函數，包括路由跳轉及其實作。

一、Vue3路由函數簡介

Vue3中的路由函數主要由兩個部分組成：路由實例和路由器。其中，路由實例是一個Vue Router實例，用來定義路由及其跳轉路徑；而路由器則是負責將路由實例注入到Vue實例中，使其生效並能進行路由跳轉。

二、路由實例

建立路由實例

在Vue3中，我們可以透過呼叫Vue Router函數來建立路由實例，範例程式碼如下：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

登入後複製

在上述程式碼中，createRouter()函數可以接受一個配置對象，包括history和routes兩個屬性。其中history用於指定路由模式，routes則用於定義路由表。

路由表定義

路由表是由路由配置物件陣列組成的，陣列中每個物件都表示一個路由的定義，包括以下幾個屬性：

path：路由路徑;
component：路由元件;
##name ：路由名稱；
meta：路由元資訊。

在路由表中，我們可以使用

path和component來定義路由路徑和路由元件，範例程式碼如下：

import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';

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

登入後複製

路由路徑可以使用佔位符來表示動態參數，範例程式碼如下：

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

登入後複製

在上述範例中，路由路徑

/user/:id中的冒號表示該路徑可以符合一個動態參數，我們可以透過props屬性來將動態參數作為元件屬性傳遞到路由元件中。

在Vue3中，我們可以使用巢狀路由來組織應用的路由結構。嵌套路由是指路由路徑包含多個層級的情況，範例程式碼如下：

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: '/about',
          component: About
        },
        {
          path: '/contact',
          component: Contact
        }
      ]
    }
  ]
})

登入後複製

上述範例中，我們在

/路徑下定義了一個名為Layout的路由元件，並將其作為嵌套路由的父級路徑。 Layout元件中存在三個子路由，分別對應不同的路徑。

路由守衛用於在路由跳轉前或跳轉後執行一些邏輯操作。在Vue3中，路由守衛主要分為全域守衛、路由守衛及組件守衛三類。

全域守衛有三種：

beforeEach：在路由跳轉前執行邏輯;
beforeResolve：路由解析完成後，進行路由比對前執行的邏輯；
afterEach：路由跳轉後執行的邏輯。

路由守衛分為兩種：

beforeEnter：在進入路由之前執行的邏輯;
beforeLeave：在離開路由之前執行的邏輯。

元件守衛是針對元件級路由而言，包含以下幾種：

#beforeRouteEnter：在元件進入路由前執行的邏輯；
beforeRouteUpdate：在元件更新路由前執行的邏輯；
beforeRouteLeave：在元件離開路由前執行的邏輯。

三、路由器

#在建立好路由實例後，我們需要將其註入Vue實例中，使之生效。在Vue3中，我們可以透過呼叫

createApp函數來建立Vue實例，範例程式碼如下：

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

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

登入後複製

在上述程式碼中，我們使用

createApp函數建立Vue實例，並透過use方法將路由實例router注入到Vue實例中。

在Vue3中，我們可以透過呼叫

router.push方法來實現路由跳轉。 router.push方法接受一個參數，用來指定需要跳轉的路由路徑。範例程式碼如下：

import { RouterLink } from 'vue-router';

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/contact">Contact</RouterLink>

登入後複製

在上述範例中，我們使用

元件取代了Vue2版本中的元件，用於實現路由跳轉。

以上就是Vue3中的路由函數的詳細講解，包括路由實例和路由器的使用以及路由跳轉的實作。透過本文的學習，相信大家已經對Vue3中的路由函數有了進一步的了解。

以上是Vue3中的路由函數詳解：實現SPA應用的路由跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！