對於大多數單頁應用程序而言，管理路由是一項必不可少的功能。隨着新版本的vue Router處於Alpha階段，我們已經可以開始查看下一個版本的vue中它是如何工作的。
Vue3中的許多更改都會稍微改變我們訪問插件和庫的方式，其中包括Vue Router。我們將結合使用Alpha版本的Vue Router和當前的Vue3 Alpha版本進行研究。
本文告訴你如何將Vue Router添加到Vue3項目中，並有一個很好的小例子！
設置
首先，我們將使用由Evan You 發布的Vue3 Webpack預覽版。
讓我們使用 git clone https://github.com/vuejs/vue-next-webpack-preview.git 克隆倉庫。
然后，要將vue-router alpha添加到我們的項目中，我們要修改 package.json 文件。
在我們的依賴關系中，我們想添加以下版本的vue-router
"dependencies": { "vue": "^3.0.0-alpha.10", "vue-router": "4.0.0-alpha.4" }現在，我們終於可以從命令行運行 npm install 來安裝所有依賴項。
我們最終要做的設置是實際創建你的路由文件以及一些映射到它的視圖。
在 src/ 文件夾中，我們將添加三個文件。
- router/index.js
- views/Home.vue
- views/Contact.vue
我們的路由器文件將包含我們的路由器，並且我們的 Home/Contact 視圖將只輸出一個單詞，以便我們了解發生了什么。
建立路由
一切准備就緒，讓我們開始使用Vue Router！
簡而言之，Vue Router的Vue3版本的主要區別在於我們必須導入新方法才能使代碼正常工作。其中最重要的是createRouter 和 createWebHistory。
在我們的 router/index.js 文件中，讓我們導入這兩個方法以及前面的兩個視圖。
import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import Contact from '../views/Contact.vue'接下來，我們要做的是使用createWebHistory方法創建一個routerHistory對象。
import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import Contact from '../views/Contact.vue' const routerHistory = createWebHistory()在此之前，我們可以只輸入 mode: history 來從哈希模式切換到 history 模式，但是現在我們使用 history: createWebHistory() 來實現這一點。
接下來，我們實際上可以使用 createRouter 創建路由器，它接受一個對象，我們希望傳遞 routerHistory 變量以及兩個路由的數組。
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/', component: Home }, { path: '/contact', component: Contact } ] })最后，讓我們將路由導出。
export default router如你所見，它仍然與Vue2非常相似。但是，通過所有這些更改，可以更好地支持Typescript和進行優化，因此熟悉新方法是很不錯的。
廣州包裝設計公司http://www.maiqicn.com 電腦刺綉綉花廠 ttp://www.szhdn.com
使用vue路由器
現在我們的Vue Router文件已經設置好了，我們可以將其添加到項目中了。以前，我們可以導入它並Vue.use(router)，但這在Vue3中不一樣。
在 main.js 文件中，你會看到我們正在使用Vue中的 createApp 方法來實際創建我們的項目。在默認項目中，它鏈接 createApp 和 mount 方法。
const app = createApp(App) app.mount('#app')然后，在掛載我們的應用程序之前，我們想告訴它使用路由器文件。
import router from './router' const app = createApp(App) app.use(router) app.mount('#app')最后，在我們的App.vue文件中，讓我們實際顯示我們的 router-view 並提供一些 router-link，以便我們能夠四處導航。
<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>所以現在，如果我們單擊一下，我們將看到實際上可以在兩個頁面之間導航！
但是，如果我們嘗試直接進入我們的 /contact 路由，那將不起作用！我們遇到某種錯誤。
幸運的是，這是可以非常快速的用webpack修復。
在我們的 webpack.config.js 文件中，我們希望通過更改配置使devServer能夠使用 history api，使它看起來像這樣。
devServer: { inline: true, hot: true, stats: 'minimal', contentBase: __dirname, overlay: true, historyApiFallback: true }現在，如果我們直接導航到 /contact 路由，那么一切都應該正常運行
總結
我們已成功將vue-router添加到我們的Vue3項目中。其他大多數功能（例如導航守衛，處理滾動條）和這些功能大致相同。
這是本教程最終Github倉庫的鏈接。如果您想在Vue3測試版中安裝vue-router，這是一個很好的模板代碼。