這是迎接Vue3.0系列第四篇，其餘三篇：
另外，私信發送關鍵字：vue3ppt 即可獲取 Vue3.0-beta.1 PPT 中文版 哦！
對於大多數單頁應用程序而言，管理路由是一項必不可少的功能。隨著新版本的Vue Router處於Alpha階段，我們已經可以開始查看下一個版本的Vue中它是如何工作的。
Vue3中的許多更改都會稍微改變我們訪問插件和庫的方式，其中包括Vue Router。我們將結合使用Alpha版本的Vue Router和當前的Vue3.0-beta.1 版本進行研究。
本文告訴你如何將Vue Router添加到Vue3項目中，並有一個很好的小例子！
設置
首先，我們將使用由Evan You 發佈的Vue3 Webpack預覽版。
讓我們使用git clone 命令克隆倉庫。
<code>git
clone https://github.com/vuejs/vue-next-webpack-preview.git /<code>
然後，要將vue-router alpha添加到我們的項目中，我們要修改 package.json 文件。
在我們的依賴關係中，我們想添加以下版本的vue-router
<code>"dependencies"
: {"vue"
:"^3.0.0-alpha.10"
,"vue-router"
:"4.0.0-alpha.4"
}/<code>
現在，我們可以從命令行運行 npm install 來安裝所有依賴項。
我們最終要做的設置是實際創建你的路由文件以及一些映射到它的視圖。
在 src/ 文件夾中，我們將添加三個文件。
- router/index.js
- views/Home.vue
- views/Contact.vue
我們的路由器文件將包含我們的路由器，並且我們的 Home/Contact 視圖將只輸出一個單詞，以便我們瞭解發生了什麼。
建立路由
一切準備就緒，讓我們開始使用Vue Router！
簡而言之，Vue Router的Vue3版本的主要區別在於我們必須導入新方法才能使代碼正常工作。其中最重要的是 createRouter 和 createWebHistory。
在我們的 router/index.js 文件中，讓我們導入這兩個方法以及前面的兩個視圖。
<code>import
{ createRouter, createWebHistory }from
'vue-router'
import
Homefrom
'../views/Home.vue'
import
Contactfrom
'../views/Contact.vue'
/<code>
接下來，我們要做的是使用createWebHistory方法創建一個routerHistory對象。
<code>import
{ createRouter, createWebHistory }from
'vue-router'
import
Homefrom
'../views/Home.vue'
import
Contactfrom
'../views/Contact.vue'
const
routerHistory = createWebHistory()/<code>
在此之前，我們可以只輸入 mode: history 來從哈希模式切換到 history 模式，但是現在我們使用 history: createWebHistory() 來實現這一點。
接下來，我們實際上可以使用 createRouter 創建路由器，它接受一個對象，我們希望傳遞 routerHistory 變量以及兩個路由的數組。
<code>const
router = createRouter({
history
:routerHistory,
routes
:[
{
path
:'/',
component
:Home
},
{
path
:'/contact',
component
:Contact
}
]
})
/<code>
最後，讓我們將路由導出。
<code>export
default
router/<code>
如你所見，它仍然與Vue2非常相似。但是，通過所有這些更改，可以更好地支持Typescript和進行優化，因此熟悉新方法是很不錯的。
使用vue路由器
現在我們的Vue Router文件已經設置好了，我們可以將其添加到項目中了。以前，我們可以導入它並Vue.use(router)
，但這在Vue3中不一樣。在 main.js 文件中，你會看到我們正在使用Vue中的 createApp 方法來實際創建我們的項目。在默認項目中，它鏈接 createApp 和 mount 方法。
<code>const
app = createApp(App) app.mount('#app'
)/<code>
然後，在掛載我們的應用程序之前，我們想告訴它使用路由器文件。
<code>import
routerfrom
'./router'
const
app = createApp(App) app.use(router) app.mount('#app'
)/<code>
最後，在我們的App.vue文件中，讓我們實際顯示我們的 router-view 並提供一些 router-link，以便我們能夠四處導航。
<code><
template
><
div
id
='root'
><
img
src
='./logo.png'
/><
div
id
='nav'
><
router-link
to
='/'
> Homerouter-link
><
router-link
to
='/contact'
> Contactrouter-link
>div
><
router-view
/>div
>template
>/<code>
所以現在，如果我們單擊一下，我們將看到實際上可以在兩個頁面之間導航！
但是，如果我們嘗試直接進入我們的 /contact 路由，那將不起作用！並且會報錯。
幸運的是，這是可以非常快速的用webpack修復。
在我們的 webpack.config.js 文件中，我們希望通過更改配置使devServer能夠使用 history api，代碼如下
<code>devServer:
{
inline:
true
,
hot:
true
,
stats:
'minimal'
,
contentBase:
__dirname,
overlay:
true
,
historyApiFallback:
true
}
/<code>
現在，如果我們直接導航到 /contact 路由，那麼一切都應該正常運行。
我們已成功將vue-router添加到我們的Vue3項目中。其他大多數功能（例如導航守衛，處理滾動條）和這些功能大致相同。
本示例最終代碼獲取，私信發送關鍵字：vue3-router-template。如果您想在Vue3測試版中安裝vue-router，這是一個很好的模板代碼。
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
私信回覆 ：大禮包，送某網精品視頻課程網盤資料，準能為你節省不少錢！
