快捷導(dǎo)航

Vue3中嵌套路由和編程式路由的實(shí)現(xiàn)

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

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

Vue3中的路由使用的是Vue Router庫(kù)，它是一個(gè)官方提供的用于實(shí)現(xiàn)應(yīng)用程序?qū)Ш降墓ぞ?。Vue Router在Vue.js的核心庫(kù)上提供了路由的功能，使得我們可以在單頁(yè)應(yīng)用中實(shí)現(xiàn)頁(yè)面的切換、跳轉(zhuǎn)和參數(shù)傳遞等功能。

一、嵌套路由

在Vue.js 3中，嵌套路由允許我們?cè)谝粋€(gè)頁(yè)面中創(chuàng)建多個(gè)層次的子路由。這可以幫助我們組織和管理復(fù)雜的應(yīng)用程序結(jié)構(gòu)。

要使用嵌套路由，我們需要使用Vue Router來(lái)設(shè)置路由。具體步驟如下：

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

npm install vue-router@next

在main.js（或其他適當(dāng)?shù)奈募┲袑?dǎo)入Vue Router，并創(chuàng)建一個(gè)新的路由實(shí)例：

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

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

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

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

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

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

在App.vue中，我們可以使用組件來(lái)顯示當(dāng)前路由的內(nèi)容：

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

在子組件中，我們可以通過(guò)路由對(duì)象$router來(lái)導(dǎo)航到嵌套路由：

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

以上就是Vue 3中使用嵌套路由的基本步驟。通過(guò)嵌套路由，我們可以構(gòu)建復(fù)雜的頁(yè)面布局和導(dǎo)航結(jié)構(gòu)。

下面是一個(gè)完整的示例，展示了如何在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)建了一個(gè)簡(jiǎn)單的嵌套路由結(jié)構(gòu)，其中包含主頁(yè)、關(guān)于頁(yè)面和關(guān)于頁(yè)面的子頁(yè)面。點(diǎn)擊About頁(yè)面上的鏈接，可以動(dòng)態(tài)加載相應(yīng)的子頁(yè)面。

二、編程式路由

編程式路由是指通過(guò)編碼來(lái)進(jìn)行路由的跳轉(zhuǎn)和導(dǎo)航，而不是通過(guò)用戶(hù)的交互操作來(lái)實(shí)現(xiàn)。在Vue 3中，使用編程式路由可以使用router實(shí)例的方法來(lái)實(shí)現(xiàn)。

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

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)建了一個(gè)簡(jiǎn)單的路由器實(shí)例，該實(shí)例具有一個(gè)基本路由，該路由將根路徑/映射到名為Home的組件。

然后，我們可以在Vue組件中使用router實(shí)例的方法來(lái)進(jìn)行編程式導(dǎo)航。

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

在上述示例中，我們定義了一個(gè)名為goToHome的方法，當(dāng)調(diào)用該方法時(shí)，將路由導(dǎo)航到根路徑/。

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

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

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

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

// 向前或向后導(dǎo)航幾個(gè)步驟
this.$router.go(1)  // 前進(jìn)一步
this.$router.go(-1)  // 后退一步

通過(guò)使用這些方法，我們可以在Vue 3中實(shí)現(xiàn)編程式路由。這對(duì)于需要在組件之間進(jìn)行動(dòng)態(tài)導(dǎo)航的情況非常有用。

在使用編程式路由時(shí)，有幾個(gè)需要注意的地方：

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

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