vue3 快速入門系列 - vue3 路由

在vue3 基礎(chǔ)上加入路由。

vue3 需要使用 vue-router V4，相對于 v3，大部分的 Vue Router API 都沒有變化。

Tip：不了解路由的同學(xué)可以看一下筆者之前的文章：vue2 路由

參考：vue2 路由官網(wǎng)、vue3 路由官網(wǎng)

vue-router V4

在 Vue Router API 從 v3（Vue2）到 v4（Vue3）的重寫過程中，大部分的 Vue Router API 都沒有變化，但是在遷移你的程序時，你可能會遇到一些破壞性的變化 —— 從 Vue2 遷移

vue3 需要使用 vue-router 4.x.x 版本。安裝：

PS hello_vue3> npm i vue-router

changed 37 packages, and audited 69 packages in 3s

8 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

版本：

"dependencies": {
    "vue": "^3.4.15",
    "vue-router": "^4.3.0"
  },

第一個示例

在vue3項目中加入路由。

步驟如下：

• 創(chuàng)建路由 src/router/index.ts

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// new Router 變成 createRouter
const router = createRouter({
  // mode: 'history' 配置已經(jīng)被一個更靈活的 history 配置所取代
  // 必填。否則報錯：Uncaught Error: Provide the "history" option when calling "createRouter()"
  history: createWebHistory(),
  routes
})

export default router

Tip：new Router 變成 createRouter 來創(chuàng)建路由；其中模式需要通過調(diào)用方法創(chuàng)建，必填。

• 創(chuàng)建兩個組件

<template>
  <div>
    <h1>About</h1>
    // 可以通過設(shè)置router-link-active類來為被選中的路由添加樣式
    <router-link to="/">to Home</router-link>
  </div>
</template>

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">to About</router-link>
  </div>
</template>

• App.vue 中引入 <router-view> 告訴 Vue Router 在哪里渲染匹配到的組件。

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

<script lang="ts" setup name="App">

</script>

• main.ts 通過 use 使用路由

import {createApp} from 'vue'
import App from './App.vue'
// 會自動加載 ./router/index.ts
import router from './router'

createApp(App)
// 將 Vue Router 插件安裝到 Vue 實例中，以便在整個應(yīng)用程序中使用 Vue Router 的功能
// Vue.use(MyPlugin) - 調(diào)用 `MyPlugin.install(Vue)`
.use(router)
.mount('#app')

接著就可以通過瀏覽器體驗：

Home
// 點擊，調(diào)整到 about 路由
to About

About
// 點擊，調(diào)整到 home 路由
to Home

Tip: 通過 .use(router) 在 vue 開發(fā)者工具中就會看到路由tab。

命名路由

Tip: vue2 路由 -> 命名路由

路徑有時太麻煩，可以使用命名路由替代。

例如將 About 從路徑改為名稱跳轉(zhuǎn)。核心代碼如下：

// 定義 name
{ path: '/about', component: About, name: 'guanyu' },

// 跳轉(zhuǎn)
:to="{name: 'guangyu'}"

Tip：to 目前有2種寫法，感覺字符串方式很痛快，對象還需要寫好多，但是到子路由或傳遞參數(shù)，會發(fā)現(xiàn)還是對象好用。

// 傳遞字符串 - 理解為目標(biāo)路由的路徑
to="/"
// 傳遞對象
:to="{path: '/'}"
:to="{name: 'guangyu'}"

嵌套路由

Tip：和 vue2 中路由用法相同，詳情請看：vue2 路由 -> 嵌套路由

新建一個 Article 組件，里面定義一個 router-view。請看示例：

• Article.vue

<template>
    <div>
        <h1>Article</h1>
        // path 需要將一級路由路徑加上，例如 /article，不能只寫 detail。該 name 也方便。
        // query 效果：http://localhost:5173/article/detail?id=1
        <router-link :to="{ path: '/article/detail', query: { id: 1 } }">文章 id1 詳情</router-link><br>
        <router-link :to="{ path: '/article/detail', query: { id: 2 } }">文章 id2 詳情</router-link><br>
        // 注：將對象換成字符串，效果相同
        <router-link to="/article/detail?id=3">文章 id3 詳情</router-link><br>
        <router-view></router-view>
    </div>
</template>

<script lang="ts" setup name="App">
// 可以不引入
// import {RouterView,RouterLink} from 'vue-router'
</script>

Tip：可以不引入 import {RouterView,RouterLink} from 'vue-router'

• Detail.vue

<template>
    <div>
        <h1>文章id: {{ $route.query.id }}</h1>
    </div>
</template>

• 增加路由和子路由。子路由的 path 無需增加 /

const routes = [
  { path: '/home', component: Home,},
  {
    path: '/article',
    component: Article,
    children: [
      {
        path: 'detail',
        component: Detail
      }
    ]
  },
]

• Home.vue 增加Article入口

<router-link :to="{name: 'guanyu'}">About</router-link>
<br>
<router-link :to="{path: '/article'}">Article</router-link>

測試：進入Home，點擊 Article，點擊 文章 id1 詳情，顯示 文章id: 1，測試通過。

路由 query 參數(shù)

在”嵌套路由“中我們是這樣取得 query 參數(shù)：<h1>文章id: {{ $route.query.id }}</h1>

js 中通過 useRoute hooks 取得 $route。請看示例：

<template>
    <div>
        <h1>文章id: {{ $route.query.id }}</h1>
        <h1>文章id: {{ query.id }}</h1>
    </div>
</template>

<script lang="ts" setup name="App">
import {toRefs} from 'vue'
// 返回當(dāng)前的路由地址。相當(dāng)于在模板中使用 $route。
// useRouter 返回路由器實例。相當(dāng)于在模板中使用 $router
import {useRoute} from 'vue-router'

const route = useRoute()

// route: Proxy
console.log('route: ', route);

// 錯誤：解構(gòu)需要用到 toRefs，否則頁面不會更新
// const {query} = route

// 正確：解構(gòu)
const {query} = toRefs(route)

</script>

Tip：如果需要解構(gòu)，需使用 toRefs。若想將 query.id 中的 query 去掉，可以使用后面章節(jié)的 路由 props 屬性，代碼將更優(yōu)雅

路由 params 參數(shù)

Tip：請看 vue2 路由 -> $route.params

將上節(jié) query 參數(shù)示例改成 params。

• params需要增加占位符，比如:id

{
    path: '/article',
    component: Article,
    children: [
      {
        name: 'xiangxi',
        path: 'detail/:id',
        component: Detail
      }
    ]
},

• id傳遞方式調(diào)整一下，不用 query 那種方式：

<router-link to="/article/detail/4">文章 id4 詳情</router-link><br>

• 接收 id

<h1>文章id: {{ $route.params.id }}</h1>

注：params 不能傳數(shù)組或?qū)ο螅?code>/a/:b/:c，則你必須傳 /a/1/2，如果傳 /a/1 則報錯，如果有時沒有c 可傳，可以改成 /a/:b/:c?

對象形式

將 to 改成對象形式：

 <router-link :to="{
    path: '/article/detail/4',
    params: {
        id: 5
    }
}">文章 id5 詳情</router-link><br>

瀏覽器報錯更容易理解，說 path 被忽略：

// vscode 報錯：
對象字面量只能指定已知屬性，并且“params”不在類型“RouteLocationPathRaw”中。

// 瀏覽器報錯
[Vue Router warn]: Path "/article/detail/4" was passed with params but they will be ignored. Use a named route alongside params instead.

將 path 改成 name即可：

<router-link :to="{
    // path: '/article/detail/4',
    name: 'xiangxi',
    params: {
        id: 5
    }
}">文章 id5 詳情</router-link><br>

路由 props 屬性

不就是想接收 params 或 query 傳來的參數(shù)的，還得寫這么一大塊代碼，太麻煩：

<template>
    <div>
        <h1>文章id: {{ query.id }}</h1>
    </div>
</template>

<script lang="ts" setup name="App">
import {toRefs} from 'vue'
import {useRoute} from 'vue-router'

const route = useRoute()
const {query} = toRefs(route)
</script>

可以通過 props 解決。細節(jié)如下：

props 布爾

• 定義 props

{
    name: 'xiangxi',
    path: 'detail/:id',
    component: Detail,
    // 通過 props 屬性來將路由參數(shù)傳遞給組件
    // 底層好些這樣：<Detail id=5/>
    props: true
}

• 直接通過 defineProps 接收

<template>
    <div>
        <h1>文章id: {{id }}</h1>
    </div>
</template>

<script lang="ts" setup name="App">
    defineProps(['id'])
</script>

props 函數(shù)

如果需要接收 query，需要用 props 函數(shù)，參數(shù)是 route，返回需要接收的對象：

// RouteLocationNormalized 是 Vue Router 中的一個類型，它用于描述路由的位置信息
import { type RouteLocationNormalized } from 'vue-router';

{
    name: 'xiangxi',
    path: 'detail',
    component: Detail,
    // 通過 props 屬性來將路由參數(shù)傳遞給組件
    // props: true
    props(route: RouteLocationNormalized ) {
        return route.query
    }
}

• 觸發(fā)路由從 params 改成 query:

<router-link :to="{
    name: 'xiangxi',
    query: {
        id: 5
    }
}">文章 id5 詳情</router-link><br>

• 接收方式不變：

<template>
    <div>
        <h1>文章id: {{id }}</h1>
    </div>
</template>

<script lang="ts" setup name="App">
    defineProps(['id'])
</script>

Tip：其實 props: true 就相當(dāng)于下面這段代碼：

props(route: RouteLocationNormalized ) {
    return route.params
}

props 對象

props 還可以寫成對象，但用得較少：

props: {
    id: 100
}

replace

HTML5的歷史API包含了pushState()，replaceState()和popstate事件

路由默認是 push。比如啟動第一個示例，未點擊 home 或 about 導(dǎo)航時，瀏覽器左上方既不能前進也不能后退，因為棧中只有當(dāng)前頁面，指針沒地方去。在你點擊home和about導(dǎo)航后，就可以前進和后退，即使刷新頁面，這個歷史記錄也不會變。

<router-link :to="{name: 'guanyu'}">About</router-link>
<br>
<router-link :to="{path: '/article'}">Article</router-link>

vue-router 的 replace 作用和用法和 react replace 相同。

現(xiàn)在點 About 就會直接替換

<router-link replace :to="{name: 'guanyu'}">About</router-link>

編程式導(dǎo)航

Tip：vue2 路由 -> 編程式導(dǎo)航

三秒后跳轉(zhuǎn)到 article：

<script lang="ts" setup name="App">
import { useRouter } from 'vue-router'
const router = useRouter()

type Path = string

// 說vue2 中編程式導(dǎo)航重復(fù)跳轉(zhuǎn)會報錯，vue3中沒這個問題
function to(path: Path){
  router.push(path)
}
setTimeout(() => {
  to('/article')
}, 3000)
</script>

編程式導(dǎo)航使用頻率大于聲明式導(dǎo)航（<router-link :to="...">）

to也支持對象，和聲明式導(dǎo)航用法相同，更多介紹請看：vuer-router v4 編程式導(dǎo)航

其他

路由組件和一般組件

路由組件通常放在 pages 或 views 文件夾中，一般組件通常放在 components 文件夾中 —— 一般開源的項目都會這樣分類

看一個組件是哪種，需要看其如何用。比如定義一個 Demo.vue，如果通過標(biāo)簽 <Demo/> 這種寫法來使用，就屬于一般組件，如果該組件通過路由渲染，則稱為路由組件。

卸載和掛載

通過導(dǎo)航，視覺上消失的路由組件，默認被卸載，需要用的時候在掛載。

在 第一個示例 中給 About.vue 增加兩個生命周期鉤子，再次切換 Home 和 About 組件，就能看到效果：

<template>
  <div>
    <h1>About</h1>
    <router-link to="/">Home</router-link>
  </div>
</template>

<script lang="ts" setup name="App">
import {onMounted, onUnmounted} from 'vue'
onMounted(() => {
  console.log('About 掛載了');
})
onUnmounted(() => {
  console.log('About 卸載了');
})
</script>

路由模式

history 模式 url 美觀，后期上線，需要服務(wù)端配合處理路徑問題，否則刷新會有404。當(dāng)用戶在瀏覽器中直接訪問一個路由，或者刷新頁面時，如果服務(wù)器端沒有正確配置，可能會導(dǎo)致 404 錯誤，因為此時服務(wù)器會嘗試去尋找對應(yīng)的文件或路由路徑，而實際上這個路徑是由前端控制的，并不一定存在于服務(wù)器端的文件系統(tǒng)中。為了解決這個問題，你需要在服務(wù)器端配置一個通配符路由，將所有的路由請求都指向你的應(yīng)用的入口文件（比如 index.html），這樣就會確保 Vue Router 能夠正確地處理路由請求。

如果你使用的是 Node.js 服務(wù)器，可以使用 Express 框架來進行配置，示例代碼如下所示：

const express = require('express');
const path = require('path');
const app = express();

// 靜態(tài)資源目錄，例如你的 CSS、JavaScript 文件等
app.use(express.static(path.join(__dirname, 'public')));

// 通配符路由，將所有的路由請求都指向 index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// 啟動服務(wù)器，監(jiān)聽端口
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

這樣配置后，無論用戶訪問哪個路由，服務(wù)器都會返回 index.html，然后 Vue Router 就可以根據(jù)路由配置來正確地渲染相應(yīng)的組件，避免了刷新頁面時出現(xiàn)的 404 錯誤。

Hash 模式在 SEO 優(yōu)化方面相對較差。

• 比如不利于搜索引擎爬蟲：Hash 模式下，URL 中的哈希部分（#后面的內(nèi)容）不會被包含在 HTTP 請求中，因此在服務(wù)器接收請求時，哈希部分對于服務(wù)器來說是不可見的。這意味著搜索引擎爬蟲無法直接獲取到 URL 中的實際內(nèi)容，因為爬蟲主要是通過 HTTP 請求獲取頁面內(nèi)容的，所以無法獲取到 hash 后面的內(nèi)容，這樣就會導(dǎo)致搜索引擎無法正確地索引和解析頁面。

雖然使用 history 模式相對于 hash 模式在 SEO 優(yōu)化方面有所改善，但它仍然是單頁應(yīng)用（SPA），可以和服務(wù)端渲染結(jié)合

沒有匹配到指定的路徑 /

配置如下路由，第一次打開，瀏覽器控制臺有警告：main.ts:9 [Vue Router warn]: No match found for location with path "/"

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About, name: 'guanyu' }
]

可以通過重定向解決。就像這樣：文章來源地址http://www.zghlxwxcb.cn/news/detail-845375.html

const routes = [
  { path: '/', redirect: '/home'},
  { path: '/home', component: Home,},

到了這里，關(guān)于vue3 快速入門系列 —— vue3 路由的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！