萬字血書Vue—路由

来源:https://www.cnblogs.com/gfhcg/archive/2023/03/19/17232523.html
-Advertisement-
Play Games

多個路由通過路由器進行管理。 前端路由的概念和原理 (編程中的)路由（router）就是一組key-value對應關係，分為：後端路由和前端路由 後端路由指的是：請求方式、請求地址和function處理函數之間的對應關係 在SPA程式中，所有組件的展示和切換都在這唯一的一個頁面內完成，此時，不同組件 ...


image
多個路由通過路由器進行管理。

前端路由的概念和原理

(編程中的)路由（router）就是一組key-value對應關係，分為：後端路由和前端路由

後端路由指的是：請求方式、請求地址和function處理函數之間的對應關係

在SPA程式中，所有組件的展示和切換都在這唯一的一個頁面內完成，此時，不同組件之間的切換需要通過前端路由來實現

通俗易懂的來說，前端路由是：Hash地址（url中#的部分）與組件之間的對應關係

前端路由的工作方式

  • 用戶點擊了頁面上的路由鏈接
  • 導致了URL地址欄中的Hash值發生了變化
  • 前端路由監聽到了Hash地址的變化
  • 前端路由把當前Hash地址對應的組件渲染到瀏覽器中

image

實現簡易的前端路由（底層實現原理）

App.vue根組件

<template>
  <div>
    <h1>這是App根組件</h1>
    <a href="#/Home">Home</a>&nbsp;
    <a href="#/Movie">Movie</a>&nbsp;
    <a href="#/About">About</a>&nbsp;
    <hr>

    <component :is="comName"></component>
  </div>
  
</template>

<script>
import MyHome from './MyHome.vue'
import Mymovie from './MyMovie.vue'
import MyAbout from './MyAbout.vue'
import { walkFunctionParams } from '@vue/compiler-core'

export default {
    name:'App',
    components:{
        MyHome,
        MyAbout,
        Mymovie,
    },
    data(){
        return{
            comName:'MyHome'
        }
    },
    created(){
        window.onhashchange=()=>{
            switch(location.hash){
                case '#/Home':
                    this.comName='MyHome'
                    break
                 case '#/Movie':
                    this.comName='MyMovie'
                    break
                 case '#/About':
                    this.comName='MyAbout'
                    break
            }
        }
    }

}
</script>

<style lang="less" scoped>

</style>

vue-router的基本使用

vue-router是vue.js官方給出的路由解決方案，它只能結合vue項目進行使用，能夠輕鬆的管理SPA項目中的組件切換。

二者差異主要是在聲明router配置文件上。

vue-router 3.x的基本使用步驟

  • 在項目中安裝vue-router
npm install [email protected] -S
  • 在src源代碼目錄下，新建router/index.js路由模塊
//導入包
import Vue from 'vue'
import VueRouter from 'vue-router'
//插件引入
Vue.use(VueRouter)
//創建路由的實例對象
const router = new VueRouter
//向外共用
export default router
  • 在入口文件main.js中引入
import router from '@/router/index.js'
......
new Vue({
    ...
    router:router
    ...
}).$mount('#app')

vue-router 4.x的基本使用步驟

  • 在項目中安裝vue-router
npm install vue-router@next -S
  • 定義路由組件

MyHome.vue、MyMovie.vue、MyAbout.vue

  • 聲明路由鏈接和占位符

可以使用<router-link>標簽(會被渲染成a鏈接)來聲明路由鏈接，並使用<router-view>標簽來聲明路由占位符

<template>
  <div>
    <h1>這是App根組件</h1>
   <!--  <a href="#/Home">Home</a>&nbsp;
    <a href="#/Movie">Movie</a>&nbsp;
    <a href="#/About">About</a>&nbsp; -->
      
   <!-- 聲明路由鏈接 -->
    <router-link to="/home">首頁</router-link>
     <router-link to="/movie">電影</router-link>
      <router-link to="/about">我的</router-link>
    <hr>
   <!-- 路由占位符 -->
   <router-view></router-view>
    <component :is="comName"></component>
  </div>
  
</template>
  • 創建路由模塊

從項目中創建router.js路由模塊，按照以下四步：

從vue-router中按需導入兩個方法

import { createRouter, createWebHashHistory } from 'vue-router'
//createRouter方法用於創建路由的實例對象
//createWebHashHistory用於指定路由的工作方式(hash模式)

導入需要使用路由控制的組件

import MyHome from './MyHome.vue'
import MyMovie from './MyMovie.vue'
import MyAbout from './MyAbout.vue'

創建路由實例對象

const router = createRouter({
history: createWebHashHistory(),
routes: [
  {
      path: '/home', component: MyHome
  },
  {
      path: '/movie', component: MyMovie
  },
  {
      path: '/about', component: MyAbout
  },

]
})

向外共用路由實例對象

export default router

在main.js中導入並掛載路由模塊

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import router from './components/router'

const app = createApp(App)
//掛載路由寫法
app.use(router)
app.mount('#app')
  • 導入並掛載路由模塊

vue-router的高級用法

路由重定向

指的是：用戶在訪問地址A的時候，強制用戶跳轉到地址C，從而展示特點的組件頁面

通過路由規則的redirect屬性，指定新的路由地址

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/home', component: MyHome
        },
        {
            path: '/',redirect:'/home' //訪問根路徑會重定向到home組件
        },
        {
            path: '/movie', component: MyMovie
        },
        {
            path: '/about', component: MyAbout
        },

    ]
})
路由傳參

query參數

<router-link :to="/about/home/message?id=123&title='abc'">我的</router-link>

<router-link :to="{
                 path:'/about/home/message',
                 query:{
                 	id:123,
                 	title:'abc'
                 }
               }">
    我的
</router-link>

params參數

聲明時：

path:'/about/home/message/:id/:title'

<router-link :to="/about/home/message/123/abc">我的</router-link>

<router-link :to="{
                 name:'my',
                 params:{
                 	id:123,
                 	title:'abc'
                 }
               }">
    我的
</router-link>

this.$route 是路由的"參數對象"

this.$router 是路由的"導航對象"

路由高亮
  • 使用預設的高亮class類名

被激活的路由鏈接，預設會使用router-link-active的類名,開發者可以使用此類名選擇器，為激活的路由鏈接設置高亮樣式

  • 自定義路由高亮的class類

在創建路由的實例對象時，開發者可以基於linkActiveClass屬性，自定義類名

const router = createRouter({
    history: createWebHashHistory(),
    linkActiveClass:'active-router',
    routes: [
        {
            path: '/home', component: MyHome
        },
        {
            path: '/',redirect:'/home' //訪問根路徑會重定向到home組件
        },
        {
            path: '/movie', component: MyMovie
        },
        {
            path: '/about', component: MyAbout
        },

    ]
})
嵌套路由

通過路由來實現組件的嵌套展示

步驟：

  • 聲明子路由鏈接和子路由占位符
<template>
  <div>MyAbout組件</div>
  <hr>
  <router-link to="/about/tab1">tab1</router-link>&nbsp;
  <router-link to="/about/tab2">tab2</router-link>

  <router-view></router-view>
</template>
  • 在父路由規則中，通過children屬性嵌套聲明子路由規則
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/home', component: MyHome
        },
        {
            path: '/movie', component: MyMovie
        },
        {
            path: '/about', component: MyAbout,children:[
                {
                path:'tab1',component:Tab1
            },
            {
                path:'tab2',component:Tab2
            },
        ]
        },

    ]
})

子路由規則的path不要以/開頭

在嵌套路由中實現路由的重定向

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/home', component: MyHome
        },
        {
            path: '/movie', component: MyMovie
        },
        {
            path: '/about',
            component: MyAbout,
            redirect:'/about/tab1',
            children:[
                {
                path:'tab1',component:Tab1
            },
            {
                path:'tab2',component:Tab2
            },
        ]
        },

    ]
})
動態路由匹配

指的是：把Hash地址中可變的部分定義為參數項，從而提高路由規則的復用性，在vue-router中使用英文冒號：來定義路由的參數

  {   
      path: '/movie/:id', component: MyMovie
   },

獲取動態路由參數值的方法：

  • $route.params參數對象
<template>
  <div>Mymovie組件---{{$route.params.id}}</div>
  
</template>
  • 使用props接受路由參數
{
     path: '/movie/:id', component: MyMovie,
     props: true,
},

為了簡化路由參數的獲取形式，vue-router允許在路由規則中開啟props傳參

編程式導航

通過調用API實現導航的方式，叫做編程式導航，與之對應的，通過點擊鏈接實現導航的方式，叫做聲明式導航。

  • 普通網頁中點擊a鏈接，vue項目中點擊<router-link>都屬於聲明式導航
  • 平臺網頁中調用location.herf跳轉到新頁面的方式，屬於編程式導航

vue-router中編程式導航API

  • this.$router.push('hash地址') 跳轉到指定Hash地址，並增加一條歷史記錄，從而展示對應的組件。
  • this.$router.replace('hash地址') 跳轉到指定Hash地址，並替換當前的歷史記錄，從而展示對應的組件。
  • this.$router.go('數值n') 實現導航歷史的前進、後退（-1），超過最大層數，則原地不動。

$router.back() 後退到上一層頁面

$router.forward() 前進到下一層頁面

命名路由

通過name屬性為路由規則定義名稱，叫做命名路由，name值不能重覆，具有唯一性

Hash地址特別長時體現出命名路由的優勢

  • 使用命名路由實現聲明式導航
<template>
	<h3>
        MyHome組件
    </h3>
    <router-link :to="{name:'mov',params:{id : 3}}">goToMovie</router-link>
</template>

<script>
	export default {
        name:'MyHome',
    }
</script>
  • 使用命名路由實現編程式導航
<template>
	<h3>
        MyHome組件
    </h3>
	<button @click="goToMovie(3)">
        goToMovie
    </button>
</template>

<script>
	export default {
        method: {
            goToMovie(id) {
                this.$router.push({name:'mov',params:{id : 3}})
            }
        }
    }
</script>
導航守衛

導航守衛可以控制路由的訪問許可權

image

如何聲明全局的導航守衛

全局的導航守衛會攔截每個路由規則，從而對每個路由都進行訪問許可權的控制

const router = createRouter({
   ...
})
//調用路由實例對象的beforeEach函數,fn必須是一個函數嗎，每次攔截後，都會調用fn進行處理
//聲明全局的導航守衛，fn稱為守衛方法
router.beforeEach(fn)
    
router.beforeEach(()=>{
    console.log('Ok')
})

守衛方法的三個形參（可選）

router.beforeEach((to,from,mext)=>{
    console.log('Ok')
    //to 目標路由對象（信息）
    //from當前導航正要離開的路由對象
    //next 是一個函數，表示放行
})

註：

在守衛方法中不聲明next形參，則預設允許用戶訪問每一個路由

在守衛方法中聲明瞭next形參，則必須調用next（）函數，否則不允許用戶訪問如何一個路由！

next函數的3種調用方式

//聲明全局的導航守衛
router.beforeEach((to, from, next) => {
    if (to.path === '/main') {
        //證明用戶要訪問後臺主頁  
        next(false)//強制用戶停留在之前所處的組件
        next('login')//強制用戶調轉到指定頁面
    } else {
        //證明用戶要訪問的不是後臺主頁 
        next()
    }
})

結合token控制後臺主頁的訪問許可權

router.beforeEach((to, from, next) => {
    const tokenStr = localStorage.getItem('token') //讀取token


    if (to.path === '/main' && !tokenStr) { //token不存在，需要登錄
        //證明用戶要訪問後臺主頁  
       // next(false)//強制用戶停留在之前所處的組件
        next('login')//強制用戶調轉到指定頁面
    } else {
        //證明用戶要訪問的不是後臺主頁 
        next()
    }
})

Hash&History

路由器的兩種工作模式：hash&history。

對於url來說：#及後面的內容就是hash值，hash值不會帶給伺服器。

hash模式：

  1. 地址中永遠帶著#號，不美觀；
  2. 若地址校驗嚴格，會被標記為不合法；
  3. 相容性較好；

history模式:

  1. 地址乾凈，美觀；
  2. 相容性比hash模式較差；
  3. 應用部署上線需要後端支持，解決刷新頁面服務端404問題；（node可以使用connect-history-api-fallback）

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SQL server分頁的三種方法
    一、Entity Framework的Linq語句的分頁寫法： var datacount = test.OrderBy(t => t.testID) .Skip(pageSize * (pageIndex - 1)) .Take(pageSize).ToList(); 二、SQL Server分頁 ...
  • Vue——initEvents【六】
    前言 前面我們簡單的瞭解了 vue 初始化時的一些大概的流程，這裡我們詳細的瞭解下具體的內容; 內容 這一塊主要圍繞init.ts中的initEvents進行剖析，初始化生命周期之後緊接著。 initEvents initEvents的方法位於scr/core/instance/events.ts中 ...
  • 最新 umi4-max 如何使用 webpack5 聯邦模塊
    新項目用 umi4-max 搭建，部分功能想要使用其他項目的功能，不想重新開發，想到了使用 webpack5 的聯邦模塊，可以直接引用其他項目代碼來實現共用代碼。 理想很美好，現實很殘酷。直接按照 webpack5 聯邦模塊的使用方法，並不能成功，而官方文檔沒有明確說明如何使用。 webpack 聯 ...
  • 談談 Vue shallowRef 和 shallowReactive
    深層次響應式 reactive 和 ref 創建的對象都是深層次的，對象的根屬性和嵌套屬性都是響應式的。 深層次轉換是遞歸地轉為響應式，對象里的每個屬性訪問都將觸發代理的依賴追蹤，這種性能負擔通常這隻有在處理超大型數組或層級很深的對象時才比較明顯。例如，一次渲染需要訪問 100000+ 個屬性時，才 ...
  • 前端設計模式——原型模式
    原型模式（Prototype Pattern）：使用原型實例指定創建對象的種類，並通過拷貝這些原型創建新的對象。 在JavaScript中，所有的對象都有一個原型鏈。原型鏈是一種機制，它允許我們在對象上定義屬性和方法，並且可以從它的原型中繼承屬性和方法。當我們訪問一個對象的屬性或方法時，JavaSc ...
  • 前端：頁面安全問題，從前端角度使用js禁止用戶修改頁面代碼
    所周知，審查元素（F12或者右鍵檢查）的情況下，大家都可以隨機更改一部分頁面的代碼，註入惡意JS等等，這種情況避免也不難，雖然還能看到一部分H5源碼，但是無法修改；所以我們可以通過一下三種方式解決問題： 1、屏蔽F12 審查元素； 2、屏蔽右鍵菜單來初步解決這些問題（也就是解決發現問題的人[偷笑]） ...
  • JS校驗銀行卡號以及通過銀行卡號自動帶出所屬銀行信息
    本文實例講述了JS實現的獲取銀行卡號歸屬地及銀行卡類型操作以及Luhn校驗演算法校驗銀行卡號演算法。分享給大家供大家參考，具體如下： javascript代碼如下 /** * Luhn校驗演算法校驗銀行卡號；Luhm校驗規則：16位銀行卡號（19位通用）:1、將未帶校驗位的 15（或18）位卡號從右依次編 ...
  • CSS必知必會
    CSS概念 css的使用是讓網頁具有統一美觀的頁面，css層疊樣式表，簡稱樣式表，文件尾碼名.css css的規則由兩部分構成：選擇器以及一條或者多條聲明 選擇器：通常是需要改變的HTML元素 聲明：由一個屬性和一個值組成，每個屬性有一個值，屬性和值使用類似key：value的形式（如下方h1就是選 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類