vue3.0 Composition API 上手初體驗 使用 vue-router 構建多頁面應用

vue3.0 Composition API 上手初體驗 使用 vue-router 構建多頁面應用

前兩講，我們已經順利的使用 vue3.0 將項目跑起來了。但是實在是過於簡陋，目前我們幾乎不可能開發只有一個頁面的應用。因此，vue-router 是必不可少的。

這一講，我們就來講講最新的 vue-router 配合 vue3.0 是如何玩的。首先，我們進入我們的項目目錄，安裝依賴。我的 demo 目錄爲 ~/Sites/myWork/demo/vue3-demo。

本人爲 MacOS 環境， Windows 環境請自行將一些命令轉換成你習慣的操作。比如在文件夾中操作，或在 vscode 等編輯器中操作。

安裝 vue-router

# 進入項目文件夾
cd ~/Sites/myWork/demo/vue3-demo
# 安裝 vue-router
npm i vue-router@next
# 進入 src 目錄
cd src
# 創建路由和視圖文件夾
mkdir router views
# 創建路由基礎文件和首頁基礎文件
touch router/index.js views/Home.vue views/About.vue

這裏我安裝到的版本是 4.0.0-alpha.11 還在 alpha 階段。估計過幾天就進入 beta 版本了。

執行完這些操作後，我們的 src 目錄結構如下：

├── App.vue
├── main.js
├── router
│   └── index.js
└── views
    ├── About.vue
    └── Home.vue

跟着我上面的命令走，結構應該就是這個。如果不是的話，就好好檢查一下咯，然後調整一下目錄結構。

編寫我們的各個文件

src/router/index.js

// 可以根據路由模式的不同，後面倆可以只引用一個
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'

// 構建我們的頁面路由配置，可以看到，這裏和原來的寫法並無二致。
const routes = [
  {
    path: '/',
    component: Home
  }, {
    path: '/about',
    component: () => import('@/views/About.vue'),
  }
]

const router = createRouter({
  // 使用 hash 模式構建路由（ url中帶 # 號的那種)
  history: createWebHashHistory(),
  // 使用 history 模式構建路由 （ url 中沒有 # 號，但生產環境需要特殊配置）
  // history: createWebHistory(),
  routes
})
export default router

可以看到，這裏也和原來的寫法完全不一樣了，變成了函數式的寫法，也不用引入 vue 了。

src/views/Home.vue

<template>
  這是我們的首頁哦！
  <router-link to="/about">點這裏去關於我們頁面</router-link>
</template>

得益於 vue3.0 的特性，我們現在不比把組件內容全部包裹在某一個 div 下面了，一個 template 裏面可以有多個根節點元素，是沒有關係的。

如果我沒記錯的話，當年 vue 0.x 版本中也是這樣的。後來必須加個根節點，我還吐槽了一陣子。

src/views/About.vue

<template>
  這裏是關於我們的頁面
  <router-link to="/">點這裏去首頁</router-link>
</template>

src/App.vue

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

我不喜歡無用的冗餘節點，所以我的項目的 App.vue 文件，一概是隻有一個 router-view

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 將創建的 App 搞個別名
const app = createApp(App)

// 使用路由配置
app.use(router)

// 掛載運行
app.mount('#app')

最近一直在寫 koa 的東西，猛然間這樣寫 vue，讓我有一種寫 nodejs 後端的既視感。。。

這種感覺很好。如果你不理解，沒關係，照抄。如果你理解，你自然知道我在說什麼。

跑起來！

在項目根目錄運行 npm run dev 即可把項目跑起來。我們看看結果：

點擊鏈接，就可以看到關於我們的頁面：

好的，可以看到，我們的 vue-router 已經很好的使用起來了！

小結

總的來說，構建頁面路由的語法，是沒有什麼變化的。但是，在引用 vue-router 和創建上，有了變化。和 vue 3.0 一樣，變成函數式的用法了。風格很統一，我很喜歡。

剛剛搜索了一下，發現中文資料比較少，有幾個做視頻教程的有講到這些，但是視頻教程是收費的。我尊重這些製作視頻教程的老師，如果我的這些博文讓你少賺錢了，我向你們道歉。

但是，如果作爲學習的朋友，看到我的博文，就算賺到了。嘿嘿。點個贊，關個注，有啥問題給我評論留言。

此外，關於 vuex 的內容，我不準備在我的博文中講到。原因有二，第一個是大多數小項目完全沒必要上 vuex，第二個是目前的文檔很不完善，等文檔完善了，有之前的使用基礎的朋友，可以很快上手的。你知道你要用，你就自然會用了。你不知道用在哪裏，愣學，是沒有意義的。

畢竟，學海無涯，而生有涯。

當然，因爲我水平還是有限的，如果哪裏講錯了，各位看官一定要在評論區中斧正，我這個人是知錯就改的。

到目前爲止，還是讓我們的項目跑起來了，還沒有談到 vue 3.0 最大的變革，下一講我們來講哦！

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。

---

《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！

文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！