圖片描述

對(duì)于大多數(shù)單頁應(yīng)用程序而言，管理路由是一項(xiàng)必不可少的功能。隨著新版本的Vue Router處于Alpha階段，我們已經(jīng)可以開始查看下一個(gè)版本的Vue中它是如何工作的。

Vue3中的許多更改都會(huì)稍微改變我們?cè)L問插件和庫的方式，其中包括Vue Router。我們將結(jié)合使用Alpha版本的Vue Router和當(dāng)前的Vue3 Alpha版本進(jìn)行研究。

本文告訴你如何將Vue Router添加到Vue3項(xiàng)目中，并有一個(gè)很好的小例子！

設(shè)置

首先，我們將使用由Evan You 發(fā)布的Vue3 Webpack預(yù)覽版。

讓我們使用 git clone https://github.com/vuejs/vue-next-webpack-preview.git 克隆倉庫。

然后，要將vue-router alpha添加到我們的項(xiàng)目中，我們要修改 package.json 文件。

在我們的依賴關(guān)系中，我們想添加以下版本的vue-router

"dependencies": {
  "vue": "^3.0.0-alpha.10",
  "vue-router": "4.0.0-alpha.4"
}

現(xiàn)在，我們終于可以從命令行運(yùn)行 npm install 來安裝所有依賴項(xiàng)。

我們最終要做的設(shè)置是實(shí)際創(chuàng)建你的路由文件以及一些映射到它的視圖。

在 src/ 文件夾中，我們將添加三個(gè)文件。

• router/index.js
• views/Home.vue
• views/Contact.vue

我們的路由器文件將包含我們的路由器，并且我們的 Home/Contact 視圖將只輸出一個(gè)單詞，以便我們了解發(fā)生了什么。

建立路由

一切準(zhǔn)備就緒，讓我們開始使用Vue Router！

簡(jiǎn)而言之，Vue Router的Vue3版本的主要區(qū)別在于我們必須導(dǎo)入新方法才能使代碼正常工作。其中最重要的是createRouter 和 createWebHistory。

在我們的 router/index.js 文件中，讓我們導(dǎo)入這兩個(gè)方法以及前面的兩個(gè)視圖。

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

接下來，我們要做的是使用createWebHistory方法創(chuàng)建一個(gè)routerHistory對(duì)象。

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

const routerHistory = createWebHistory()

在此之前，我們可以只輸入 mode: history 來從哈希模式切換到 history 模式，但是現(xiàn)在我們使用 history: createWebHistory() 來實(shí)現(xiàn)這一點(diǎn)。

接下來，我們實(shí)際上可以使用 createRouter 創(chuàng)建路由器，它接受一個(gè)對(duì)象，我們希望傳遞 routerHistory 變量以及兩個(gè)路由的數(shù)組。

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

最后，讓我們將路由導(dǎo)出。

export default router

如你所見，它仍然與Vue2非常相似。但是，通過所有這些更改，可以更好地支持Typescript和進(jìn)行優(yōu)化，因此熟悉新方法是很不錯(cuò)的。

使用vue路由器

現(xiàn)在我們的Vue Router文件已經(jīng)設(shè)置好了，我們可以將其添加到項(xiàng)目中了。以前，我們可以導(dǎo)入它并Vue.use(router)，但這在Vue3中不一樣。

在 main.js 文件中，你會(huì)看到我們正在使用Vue中的 createApp 方法來實(shí)際創(chuàng)建我們的項(xiàng)目。在默認(rèn)項(xiàng)目中，它鏈接 createApp 和 mount 方法。

const app = createApp(App)

app.mount('#app')

然后，在掛載我們的應(yīng)用程序之前，我們想告訴它使用路由器文件。

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

最后，在我們的App.vue文件中，讓我們實(shí)際顯示我們的 router-view 并提供一些 router-link，以便我們能夠四處導(dǎo)航。

<template>
  <div id='root'>
    <img src='./logo.png' />
    <div id='nav'>
      <router-link to='/'> Home</router-link>
      <router-link to='/contact'>Contact </router-link>
    </div>
    <router-view />
  </div>
</template>

所以現(xiàn)在，如果我們單擊一下，我們將看到實(shí)際上可以在兩個(gè)頁面之間導(dǎo)航！

圖片描述

但是，如果我們嘗試直接進(jìn)入我們的 /contact 路由，那將不起作用！我們遇到某種錯(cuò)誤。

幸運(yùn)的是，這是可以非常快速的用webpack修復(fù)。

在我們的 webpack.config.js 文件中，我們希望通過更改配置使devServer能夠使用 history api，使它看起來像這樣。

devServer: {
    inline: true,
    hot: true,
    stats: 'minimal',
    contentBase: __dirname,
    overlay: true,
    historyApiFallback: true
}

現(xiàn)在，如果我們直接導(dǎo)航到 /contact 路由，那么一切都應(yīng)該正常運(yùn)行

總結(jié)

我們已成功將vue-router添加到我們的Vue3項(xiàng)目中。其他大多數(shù)功能（例如導(dǎo)航守衛(wèi)，處理滾動(dòng)條）和這些功能大致相同。

這是本教程最終Github倉庫的鏈接。如果您想在Vue3測(cè)試版中安裝vue-router，這是一個(gè)很好的模板代碼。