Vue3中嵌套路由和編程式路由的實現

更新時間：2023年12月26日 10:09:51 作者：專業(yè)研究祖?zhèn)鰾ug編寫術

Vue?Router在Vue.js的核心庫上提供了路由的功能,使得我們可以在單頁應用中實現頁面的切換、跳轉和參數傳遞等功能,本文主要介紹了Vue3中嵌套路由和編程式路由的實現,感興趣的可以了解一下

一、嵌套路由

在Vue.js 3中，嵌套路由允許我們在一個頁面中創(chuàng)建多個層次的子路由。這可以幫助我們組織和管理復雜的應用程序結構。

要使用嵌套路由，我們需要使用Vue Router來設置路由。具體步驟如下：

首先，安裝Vue Router?？梢允褂胣pm或yarn等包管理器進行安裝：

npm install vue-router@next

在main.js（或其他適當的文件）中導入Vue Router，并創(chuàng)建一個新的路由實例：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 在這里定義頂級路由和嵌套路由
  ]
})

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

在路由配置中，我們可以定義頂級路由和嵌套路由。嵌套路由使用children屬性，其中可以定義子路由。

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About,
    children: [
      {
        path: '',
        component: AboutHome
      },
      {
        path: 'info',
        component: AboutInfo
      },
      {
        path: 'contact',
        component: AboutContact
      }
    ]
  }
]

在上面的示例中，我們定義了兩個路由：根路由’/‘和嵌套路由’/about’。嵌套路由有3個子路由：‘/’、‘/info’和’/contact’。

在App.vue中，我們可以使用組件來顯示當前路由的內容：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

在子組件中，我們可以通過路由對象$router來導航到嵌套路由：

<template>
  <button @click="$router.push('/about/info')">Go to About Info</button>
</template>

以上就是Vue 3中使用嵌套路由的基本步驟。通過嵌套路由，我們可以構建復雜的頁面布局和導航結構。

下面是一個完整的示例，展示了如何在Vue 3中使用嵌套路由：

// main.js

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'
import AboutHome from './components/AboutHome.vue'
import AboutInfo from './components/AboutInfo.vue'
import AboutContact from './components/AboutContact.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About,
      children: [
        {
          path: '',
          component: AboutHome
        },
        {
          path: 'info',
          component: AboutInfo
        },
        {
          path: 'contact',
          component: AboutContact
        }
      ]
    }
  ]
})

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

<!-- App.vue -->
<template>
  <div>
    <h1>Vue Router Nesting Example</h1>
    <router-view></router-view>
  </div>
</template>

<!-- Home.vue -->
<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the homepage</p>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h2>About</h2>
    <router-link to="/about">Home</router-link>
    <router-link to="/about/info">Info</router-link>
    <router-link to="/about/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

<!-- AboutHome.vue -->
<template>
  <div>
    <p>Information about the company</p>
  </div>
</template>

<!-- AboutInfo.vue -->
<template>
  <div>
    <p>Contact information</p>
  </div>
</template>

<!-- AboutContact.vue -->
<template>
  <div>
    <p>Contact details</p>
  </div>
</template>

在上述示例中，我們創(chuàng)建了一個簡單的嵌套路由結構，其中包含主頁、關于頁面和關于頁面的子頁面。點擊About頁面上的鏈接，可以動態(tài)加載相應的子頁面。

二、編程式路由

編程式路由是指通過編碼來進行路由的跳轉和導航，而不是通過用戶的交互操作來實現。在Vue 3中，使用編程式路由可以使用router實例的方法來實現。

首先，我們需要在Vue應用程序的根實例中創(chuàng)建一個路由器實例?？梢允褂?code>createRouter函數來創(chuàng)建一個新的路由器實例，并將其掛載到Vue應用程序上。

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

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

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

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

在上述例子中，我們創(chuàng)建了一個簡單的路由器實例，該實例具有一個基本路由，該路由將根路徑/映射到名為Home的組件。

然后，我們可以在Vue組件中使用router實例的方法來進行編程式導航。

export default {
  methods: {
    goToHome() {
      this.$router.push('/')
    }
  }
}

在上述示例中，我們定義了一個名為goToHome的方法，當調用該方法時，將路由導航到根路徑/。

除了push方法外，router實例還提供了其他導航方法，例如replace，go，back和forward，可以根據具體需要選擇適合的方法。

// 替換當前路由
this.$router.replace('/other-path')

// 在瀏覽器歷史記錄中后退一步
this.$router.back()

// 在瀏覽器歷史記錄中前進一步
this.$router.forward()

// 向前或向后導航幾個步驟
this.$router.go(1)  // 前進一步
this.$router.go(-1)  // 后退一步

通過使用這些方法，我們可以在Vue 3中實現編程式路由。這對于需要在組件之間進行動態(tài)導航的情況非常有用。

在使用編程式路由時，有幾個需要注意的地方：

獲取router實例： 在Vue 3中，可以通過this.$router來獲取路由器實例。但是需要注意的是，在使用this.$router之前，需要確保已經通過app.use(router)將路由器實例掛載到Vue應用程序上。
組件中的this指向問題： 在Vue 3中，組件的選項中沒有this屬性，因此無法直接使用this來訪問$router實例。為了解決這個問題，可以使用inject和provide提供和注入router實例。
```
// 在main.js中提供router實例
app.provide('router', router)

// 在組件中注入router實例
export default {
  inject: ['router'],
  methods: {
    goToHome() {
      this.router.push('/')
    }
  }
}
```
通過在根組件中提供router實例，并在組件中注入，可以解決在組件中使用編程式路由時的this指向問題。
引入路由相關的函數： 在Vue 3中，需要使用createRouter和createWebHistory這兩個函數來創(chuàng)建路由器實例和路由歷史實例。需要確保正確引入這些函數。
```
import { createRouter, createWebHistory } from 'vue-router'
```
路由跳轉的路徑格式： 在編程式路由中，需要注意路由路徑的格式。路徑應該是字符串，并以斜杠/開頭。
```
this.$router.push('/home')  // 正確
this.$router.push('home')   // 錯誤，缺少斜杠
```
路由導航的生命周期鉤子： 在Vue 3中，路由導航的生命周期鉤子函數有所變化?？梢允褂?code>beforeRouteEnter，beforeRouteUpdate和beforeRouteLeave等生命周期鉤子函數來處理路由的導航。需要注意根據Vue 3的生命周期鉤子函數文檔來使用正確的鉤子函數。