這篇文章主要講解了“Vue路由vue-router怎么應(yīng)用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue路由vue-router怎么應(yīng)用”吧！

成都創(chuàng)新互聯(lián)公司成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元白城做網(wǎng)站,已為上家服務(wù),為白城各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

前端路由的發(fā)展歷程

路由的概念在軟件工程中出現(xiàn)，最早是在后端路由中實現(xiàn)的，原因是web的發(fā)展主要經(jīng)歷了這樣一些階段：

• 后端路由階段；

• 前后端分離階段；

• 單頁面富應(yīng)用（SPA）；

1. 后端路由階段

早起的網(wǎng)站開發(fā)整個HTML頁面是由服務(wù)器來渲染的，即服務(wù)器直接生產(chǎn)渲染好對應(yīng)的HTML頁面, 返回給客戶端進行展示。如圖：

優(yōu)點：利于SEO優(yōu)化

缺點：整個頁面由后端人員維護，HTMl代碼以及數(shù)據(jù)對應(yīng)邏輯會混合一起，編寫和維護十分糟糕。

2. 前后端分離

**前端渲染：**每次請求涉及到的靜態(tài)資源都會從靜態(tài)資源服務(wù)器獲取，這些資源包括HTML+CSS+JS，然后在前端對這些請求回來的資源進行渲染?？蛻舳说拿恳淮握埱螅紩撵o態(tài)資源服務(wù)器請求文件，這個時候的后端就只是負責(zé)提供API了。

前后端分離：

• 后端只負責(zé)提供API，前端通過Ajax 獲取數(shù)據(jù)后通過JavaScript將數(shù)據(jù)渲染到頁面

• 后端專注于數(shù)據(jù)，前端專注于交互和可視化

單頁面(SPA)富應(yīng)用階段：

• 在前后端分離的基礎(chǔ)上加了一層前端路由，前端來維護一套路由規(guī)則

• 核心：改變頁面URL，但不進行頁面刷新。

認識 vue-router

安裝 Vue-Router

npm install vue-router

步驟：

• 創(chuàng)建路由需要映射的組件

• 通過createRouter創(chuàng)建路由對象，并且傳入routes和history模式

• 使用app注冊路由對象（use方法）

• 路由使用: 通過和和

import { createRouter, createWebHashHistory } from "vue-router"

import Home from "../views/Home.vue"
import About from "../views/About.vue"
// 創(chuàng)建一個路由：映射關(guān)系
const router = new createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      component: Home
    },
    {
      path: "/about",
      component: About
    }
  ]
})

export default router

補充：路由的其他屬性

name屬性：記錄路由獨一無二的名稱;

meta屬性：自定義數(shù)據(jù)

router-link（補充）

router-link事實上有很多屬性可以配置：

• to屬性： 是一個字符串，或者是一個對象

• replace屬性： 設(shè)置 replace 屬性的話，當(dāng)點擊時，會調(diào)用 router.replace()，而不是 router.push()。一般是不使用relace屬性，給用戶的體驗感不是很好。

• active-class屬性： 設(shè)置激活a元素后應(yīng)用的class，默認是router-link-active

• exact-active-class屬性： 鏈接精準激活時，應(yīng)用于渲染的 的 class，默認是router-link-exact-active；

路由懶加載

問題：當(dāng)打包構(gòu)建應(yīng)用時，JavaScript 包會變得非常大，影響頁面加載

解決：把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)組件。同時也可提高首屏渲染的效率。其中，Vue-Router 默認就支持動態(tài)來加載組件。因為component可以傳入一個組件，也可以接收一個函數(shù)，該函數(shù)需要放回一個Promise。import函數(shù)就是返回一個Promise

動態(tài)路由

1. 動態(tài)路由的基本匹配

將給定匹配模式的路由映射到同一個組件。以根據(jù)自己不同的需求加載不同的路由，做到不同的實現(xiàn)及頁面的渲染。

動態(tài)路由的使用一般是結(jié)合角色權(quán)限控制一起使用。

例如：有一個 User 組件，它應(yīng)該對所有用戶進行渲染，但是用戶的ID是不同的。我們可以在路徑中使用一個動態(tài)字段來實現(xiàn)，我們稱之為 路徑參數(shù)。接著在中實現(xiàn)跳轉(zhuǎn)。

2. 獲取動態(tài)路由的值

獲取動態(tài)路由的值(例如上面例子中 用戶id 123)，在template中，直接通過 $route.params獲取值。

• 在created中，通過 this.$route.params獲取值

• 在setup中，我們要使用 vue-router庫給我們提供的一個hook useRoute

3. NotFound

對于沒有匹配到相應(yīng)的路由，我們可以給用戶匹配一個固定的頁面。通過 $route.params.pathMatch獲取到傳入的參數(shù)

路由的嵌套

組件的本身也有組件需要內(nèi)部切換，這個時候就可以采用嵌套路由，在第一層路由中也使用router-view來占位之后需要渲染的組件。

{
      path: "/home",
      component: () => import("../views/Home.vue"),
      children: [
        {
          path: "/show",
          component: () => import("../views/component/show.vue")
        },
        {
          path: "/detail",
          component: () => import("../views/component/detail.vue")
        }
      ]
    },

編程式導(dǎo)航

1. 代碼的頁面跳轉(zhuǎn)

通過代碼來控制頁面的跳轉(zhuǎn)

栗子：點擊一個按鈕跳轉(zhuǎn)頁面

2. query 方式的參數(shù)

通過query的方式來傳遞參數(shù)，在界面中通過 $route.query 來獲取參數(shù)。

3. 替換當(dāng)前的位置

使用push的特點是壓入一個新的頁面，那么在用戶點擊返回時，上一個頁面還可以回退，但是如果我們希望當(dāng)前頁面是一個替換 操作，那么可以使用replace。這個時候已經(jīng)不能回退了。

4. 頁面的前后跳轉(zhuǎn)

• router 的 go 方法（指定向前(向后)跳轉(zhuǎn)幾步）

• router 的back 方法 （回溯歷史，向后一步）

• router 的forward 方法（歷史中前進，向前一步）

動態(tài)添加路由

場景：根據(jù)用戶的不同權(quán)限，注冊不同的路由

補充：路由的其他方法

刪除路由有以下三種方式：

• 方式一：添加一個name相同的路由；

• 方式二：通過removeRoute方法，傳入路由的名稱；

• 方式三：通過addRoute方法的返回值回調(diào)；

router.hasRoute()：檢查路由是否存在。

router.getRoutes()：獲取一個包含所有路由記錄的數(shù)組。

路由導(dǎo)航守衛(wèi)

vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航

全局的前置守衛(wèi)==beforeEach==是在導(dǎo)航觸發(fā)時會被回調(diào)的,它有兩個參數(shù)：

• to：即將進入的路由Route對象；

• from：即將離開的路由Route對象；

返回值：

• false：取消當(dāng)前導(dǎo)航；

• 不返回或者undefined：進行默認導(dǎo)航；

• 返回一個路由地址：可以是一個String類型的路徑也可以是一個對象

1. 登錄守衛(wèi)功能

場景：只有登錄了的用戶才能看到的頁面

2. 其他導(dǎo)航守衛(wèi)

Vue還提供了很多的其他守衛(wèi)函數(shù)，目的都是在某一個時刻給予回調(diào)，可以更好的控制程序的流程或者功能

[導(dǎo)航守衛(wèi)](導(dǎo)航守衛(wèi) | Vue Router (vuejs.org))

流程：

• 導(dǎo)航被觸發(fā)。

• 在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。

• 調(diào)用全局的 beforeEach 守衛(wèi)。

• 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi)(2.2+)。

• 在路由配置里調(diào)用 beforeEnter。 ? 解析異步路由組件。

• 在被激活的組件里調(diào)用 beforeRouteEnter。

• 調(diào)用全局的 beforeResolve 守衛(wèi)(2.5+)。

• 導(dǎo)航被確認。

• 調(diào)用全局的 afterEach 鉤子。

• 觸發(fā) DOM 更新。

• 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實例會作為回調(diào)函數(shù)的參數(shù)傳入。

感謝各位的閱讀，以上就是“Vue路由vue-router怎么應(yīng)用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue路由vue-router怎么應(yīng)用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

文章名稱：Vue路由vue-router怎么應(yīng)用
標(biāo)題網(wǎng)址：http://chinadenli.net/article22/giodjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、微信小程序、虛擬主機、搜索引擎優(yōu)化、ChatGPT、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)