VueRouter

路由介紹

1.思考

單頁面應用程序,之所以開發效率高,性能好,用戶體驗好

最大的原因就是:頁面按需更新

比如當點擊【發現音樂】和【關注】時,只是更新下面部分內容,對于頭部是不更新的

要按需更新,首先就需要明確:訪問路徑組件的對應關系!

訪問路徑 和 組件的對應關系如何確定呢? 路由

2.路由的介紹

生活中的路由:設備和ip的映射關系

Vue中的路由:路徑和組件映射關系

3.總結

  • 什么是路由
  • Vue中的路由是什么

路由的基本使用

1.目標

認識插件 VueRouter,掌握 VueRouter 的基本使用步驟

2.作用

修改地址欄路徑時,切換顯示匹配的組件

3.說明

Vue 官方的一個路由插件,是一個第三方包

4.官網

Vue Router

5.VueRouter的使用(5+2)

固定5個固定的步驟(不用死背,熟能生巧)

  1. 下載 VueRouter 模塊到當前工程,版本3.6.5
yarn add vue-router@3.6.5
  1. main.js中引入VueRouter
import VueRouter from 'vue-router'
  1. 安裝注冊
Vue.use(VueRouter)
  1. 創建路由對象
const router = new VueRouter()
  1. 注入,將路由對象注入到new Vue實例中,建立關聯
new Vue({render: h => h(App),router:router
}).$mount('#app')

當我們配置完以上5步之后 就可以看到瀏覽器地址欄中的路由 變成了 /#/的形式。表示項目的路由已經被Vue-Router管理了

6.代碼示例

main.js

// 路由的使用步驟 5 + 2
// 5個基礎步驟
// 1. 下載 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安裝注冊 Vue.use(Vue插件)
// 4. 創建路由對象
// 5. 注入到new Vue中,建立關聯import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter()new Vue({render: h => h(App),router
}).$mount('#app')

7.兩個核心步驟

  1. 創建需要的組件 (views目錄),配置路由規則
  2. 配置導航,配置路由出口(路徑匹配的組件顯示的位置)
    App.vue
<div class="footer_wrap"><a href="#/find">發現音樂</a><a href="#/my">我的音樂</a><a href="#/friend">朋友</a>
</div>
<div class="top"><router-view></router-view>
</div>

8.總結

  1. 如何實現 路徑改變,對應組件 切換,應該使用哪個插件?
  2. Vue-Router的使用步驟是什么(5+2)?

組件的存放目錄問題

注意: .vue文件 本質無區別

1.組件分類

.vue文件分為2類,都是 .vue文件(本質無區別)

  • 頁面組件 (配置路由規則時使用的組件)
  • 復用組件(多個組件中都使用到的組件)

2.存放目錄

分類開來的目的就是為了 更易維護

  1. src/views文件夾
    頁面組件 - 頁面展示 - 配合路由用
  2. src/components文件夾
    復用組件 - 展示數據 - 常用于復用

3.總結

  • 組件分類有哪兩類?分類的目的?
  • 不同分類的組件應該放在什么文件夾?作用分別是什么?

路由的封裝抽離

問題:所有的路由配置都在main.js中合適嗎?

目標:將路由模塊抽離出來。 ?好處:拆分模塊,利于維護

路徑簡寫:

腳手架環境下 @指代src目錄,可以用于快速引入組件

聲明式導航-導航鏈接

1.需求

實現導航高亮效果

如果使用a標簽進行跳轉的話,需要給當前跳轉的導航加樣式,同時要移除上一個a標簽的樣式,太麻煩!!!

2.解決方案

vue-router 提供了一個全局組件 router-link (取代 a 標簽)

  • 能跳轉,配置 to 屬性指定路徑(必須) 。本質還是 a 標簽 ,to 無需 #
  • 能高亮,默認就會提供高亮類名,可以直接設置高亮樣式

語法: 發現音樂

  <div><div class="footer_wrap"><router-link to="/find">發現音樂</router-link><router-link to="/my">我的音樂</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的組件所展示的位置 --><router-view></router-view></div></div>

3.通過router-link自帶的兩個樣式進行高亮

使用router-link跳轉后,我們發現。當前點擊的鏈接默認加了兩個class的值 router-link-exact-activerouter-link-active

我們可以給任意一個class屬性添加高亮樣式即可實現功能

4.總結

  • router-link是什么?
  • router-link怎么用?
  • router-link的好處是什么?

聲明式導航-兩個類名

當我們使用跳轉時,自動給當前導航加了兩個類名

模糊匹配(用的多)

to="/my" ?可以匹配 /my ? ?/my/a ? ?/my/b ? ?....

只要是以/my開頭的路徑 都可以和 to="/my"匹配到

精確匹配

to="/my" 僅可以匹配 ?/my

3.在地址欄中輸入二級路由查看類名的添加

4.總結

  • router-link 會自動給當前導航添加兩個類名,有什么區別呢?

聲明式導航-自定義類名(了解)

1.問題

router-link的兩個高亮類名 太長了,我們希望能定制怎么辦

2.解決方案

我們可以在創建路由對象時,額外配置兩個配置項即可。 linkActiveClasslinkExactActiveClass

const router = new VueRouter({routes: [...],linkActiveClass: "類名1",linkExactActiveClass: "類名2"
})

3.代碼演示

// 創建了一個路由對象
const router = new VueRouter({routes: [...], linkActiveClass: 'active', // 配置模糊匹配的類名linkExactActiveClass: 'exact-active' // 配置精確匹配的類名
})

4.總結

如何自定義router-link的兩個高亮類名

聲明式導航-查詢參數傳參

1.目標

在跳轉路由時,進行傳參

比如:現在我們在搜索頁點擊了熱門搜索鏈接,跳轉到詳情頁,需要把點擊的內容帶到詳情頁,改怎么辦呢?

2.跳轉傳參

我們可以通過兩種方式,在跳轉的時候把所需要的參數傳到其他頁面中

  • 查詢參數傳參
  • 動態路由傳參

3.查詢參數傳參

  • 如何傳參?
  • 如何接受參數
    固定用法:$router.query.參數名

4.代碼演示

App.vue

<template><div id="app"><div class="link"><router-link to="/home">首頁</router-link><router-link to="/search">搜索頁</router-link></div><router-view></router-view></div>
</template><script>
export default {};
</script><style scoped>
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
</style>

Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button>搜索一下</button></div><div class="hot-link">熱門搜索:<router-link to="">黑馬程序員</router-link><router-link to="">前端培訓</router-link><router-link to="">如何成為前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic'
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>

Search.vue

<template><div class="search"><p>搜索關鍵字: 黑馬程序員</p><p>搜索結果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中,獲取路由參數}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 創建了一個路由對象
const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search', component: Search }]
})export default router

main.js

...
import router from './router/index'
...
new Vue({render: h => h(App),router
}).$mount('#app')

五、聲明式導航-動態路由傳參

1.動態路由傳參方式

  • 配置動態路由

動態路由后面的參數可以隨便起名,但要有語義

const router = new VueRouter({routes: [...,{ path: '/search/:words', component: Search }]
})

  • 配置導航鏈接
    to="/path/參數值"
  • 對應頁面組件接受參數
    $route.params.參數名

params后面的參數名要和動態路由配置的參數保持一致

2.查詢參數傳參 VS 動態路由傳參

  1. 查詢參數傳參 ?(比較適合傳多個參數)
    1. 跳轉:to="/path?參數名=值&參數名2=值"
    2. 獲取:$route.query.參數名
  1. 動態路由傳參 (優雅簡潔,傳單個參數比較方便)
    1. 配置動態路由:path: "/path/:參數名"
    2. 跳轉:to="/path/參數值"
    3. 獲取:$route.params.參數名

注意:動態路由也可以傳多個參數,但一般只傳一個

3.總結

聲明式導航跳轉時, 有幾種方式傳值給路由頁面?

  • 查詢參數傳參(多個參數)
  • 動態路由傳參(一個參數,優雅簡潔)

動態路由參數的可選符(了解)

1.問題

配了路由 path:"/search/:words" ?為什么按下面步驟操作,會未匹配到組件,顯示空白?

2.原因

/search/:words ?表示,必須要傳參數。如果不傳參數,也希望匹配,可以加個可選符"?"

const router = new VueRouter({routes: [...{ path: '/search/:words?', component: Search }]
})

Vue路由-重定向

1.問題

網頁打開時, url 默認是 / 路徑,未匹配到組件時,會出現空白

2.解決方案

重定向 → 匹配 / 后, 強制跳轉 /home 路徑

3.語法

{ path: 匹配路徑, redirect: 重定向到的路徑 },比如:{ path:'/' ,redirect:'/home' }

4.代碼演示

const router = new VueRouter({routes: [{ path: '/', redirect: '/home'},...]})

Ve路由-404

1.作用

當路徑找不到匹配時,給個提示頁面

2.位置

404的路由,雖然配置在任何一個位置都可以,但一般都配置在其他路由規則的最后面

3.語法

path: "*" ? (任意路徑) – 前面不匹配就命中最后這個

import NotFind from '@/views/NotFind'const router = new VueRouter({routes: [...{ path: '*', component: NotFind } //最后一個]
})

4.代碼示例

NotFound.vue

<template><div><h1>404 Not Found</h1></div>
</template><script>
export default {}
</script><style></style>

router/index.js

...
import NotFound from '@/views/NotFound'
...// 創建了一個路由對象
const router = new VueRouter({routes: [...{ path: '*', component: NotFound }]
})export default router

九、Vue路由-模式設置

1.問題

路由的路徑看起來不自然, 有#,能否切成真正路徑形式?

  • hash路由(默認) ? ? ? ?例如: ?http://localhost:8080/#/home
  • history路由(常用) ? ? 例如: http://localhost:8080/home ? (以后上線需要服務器端支持,開發環境webpack給規避掉了history模式的問題)

2.語法

const router = new VueRouter({mode:'histroy', //默認是hashroutes:[]
})

編程式導航-兩種路由跳轉方式

1.問題

點擊按鈕跳轉如何實現?

2.方案

編程式導航:用JS代碼來進行跳轉

3.語法

兩種語法:

  • path 路徑跳轉 (簡易方便)
  • name 命名路由跳轉 (適合 path 路徑長的場景)

4.path路徑跳轉語法

特點:簡易方便

//簡單寫法
this.$router.push('路由路徑')//完整寫法
this.$router.push({path: '路由路徑'
})

5.代碼演示 path跳轉方式

6.name命名路由跳轉

特點:適合 path 路徑長的場景

語法:

  • 路由規則,必須配置name配置項
{ name: '路由名', path: '/path/xxx', component: XXX },

  • 通過name來進行跳轉
this.$router.push({name: '路由名'
})

7.代碼演示通過name命名路由跳轉

8.總結

編程式導航有幾種跳轉方式?

編程式導航-path路徑跳轉傳參

1.問題

點擊搜索按鈕,跳轉需要把文本框中輸入的內容傳到下一個頁面如何實現?

2.兩種傳參方式

1.查詢參數

2.動態路由傳參

3.傳參

兩種跳轉方式,對于兩種傳參方式都支持:

① path 路徑跳轉傳參

② name 命名路由跳轉傳參

4.path路徑跳轉傳參(query傳參)

//簡單寫法
this.$router.push('/路徑?參數名1=參數值1&參數2=參數值2')
//完整寫法
this.$router.push({path: '/路徑',query: {參數名1: '參數值1',參數名2: '參數值2'}
})

接受參數的方式依然是:$route.query.參數名

5.path路徑跳轉傳參(動態路由傳參)

//簡單寫法
this.$router.push('/路徑/參數值')
//完整寫法
this.$router.push({path: '/路徑/參數值'
})

接受參數的方式依然是:$route.params.參數值

注意:path不能配合params使用

十二、編程式導航-name命名路由傳參

1.name 命名路由跳轉傳參 (query傳參)

this.$router.push({name: '路由名字',query: {參數名1: '參數值1',參數名2: '參數值2'}
})

2.name 命名路由跳轉傳參 (動態路由傳參)

this.$router.push({name: '路由名字',params: {參數名: '參數值',}
})

3.總結

編程式導航,如何跳轉傳參?

1.path路徑跳轉

  • query傳參
this.$router.push('/路徑?參數名1=參數值1&參數2=參數值2')
this.$router.push({path: '/路徑',query: {參數名1: '參數值1',參數名2: '參數值2'}
})
  • 動態路由傳參
this.$router.push('/路徑/參數值')
this.$router.push({path: '/路徑/參數值'
})

2.name命名路由跳轉

  • query傳參
this.$router.push({name: '路由名字',query: {參數名1: '參數值1',參數名2: '參數值2'}
})
  • 動態路由傳參 (需要配動態路由)
this.$router.push({name: '路由名字',params: {參數名: '參數值',}
})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/164833.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/164833.shtml
英文地址,請注明出處:http://en.pswp.cn/news/164833.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Git 基本使用命令

Git 基本使用命令 下面是一些常用的 Git 基本使用命令&#xff1a; 初始化一個新的 Git 倉庫&#xff1a; git init克隆&#xff08;Clone&#xff09;一個遠程倉庫到本地&#xff1a; git clone <repository_url>添加文件或目錄到暫存區&#xff08;Staging Area&am…

微信小程序前端環境搭建

搭建微信小程序前端環境 申請小程序測試賬號 訪問路徑 使用微信掃描二維碼進行申請&#xff0c;申請成功之后&#xff0c;進入界面&#xff0c;獲取小程序ID(AppID)和秘鑰(AppSecret) 安裝微信web開發者工具 訪問路徑 選擇穩定開發的版本 需要在小程序的設置中將默認關閉…

geoserver發布tif矢量數據圖層

cesium加載上傳至geoserver的tif矢量數據_cesium加載tiff-CSDN博客 geoserver安裝及跨域問題解決方案&#xff1a;geoserver安裝及跨域問題解決方案_geoserver 跨域_1 1王的博客-CSDN博客 將TIF上傳至geoserver 啟動geoserver服務&#xff0c;并進入geoserver主頁。 1. 新建…

【物聯網產品架構】如何構建物聯網產品路線圖

面對現實吧。建立物聯網產品路線圖難度要比為“正常”技術產品制定路線圖要困難得多。 這是因為IoT產品是復雜的系統。為了創建一個工作的解決方案&#xff0c;物聯網技術棧的所有層 - 設備硬件&#xff0c;設備軟件&#xff0c;通信&#xff0c;云平臺和云應用都需要一起工作。…

Spring Cloud五大組件

Spring Cloud五大組件 Spring Cloud是分布式微服務架構的一站式解決方案&#xff0c;在Spring Boot基礎上能夠輕松搭建微服務系統的架構。 現有Spring Cloud有兩代實現&#xff1a; 一代&#xff1a;Spring Cloud Netflix&#xff0c;主要由&#xff1a;Eureka、Ribbon、Feig…

【c語言】 邏輯運算符運算規則

1.&&邏輯運算符的坑 int x0&#xff0c;y0&#xff0c;z0; z (x1) && (y2); printf("%d"&#xff0c;y);//y0;今天遇到了同學問的問題&#xff0c;為什么y輸出為0. 我第一時間也記不得&#xff0c;工作中一般不會寫這種代碼&#xff0c;但是卻不能…

Vue3 狀態管理 - Pinia

1. 什么是Pinia Pinia 是 Vue 的專屬的最新狀態管理庫 &#xff0c;是 Vuex 狀態管理工具的替代品 提供更加簡單的APl&#xff08;去掉了mutation&#xff0c;Pinia 中對state數據的修改可以直接通過action&#xff0c;Vuex中則是通過mutation)提供符合組合式風格的API&#…

筆記轉移:https://www.yuque.com/u32968635/lbk

語雀&#xff1a;https://www.yuque.com/u32968635/lbk

視頻剪輯技巧:如何高效批量轉碼MP4視頻為MOV格式

在視頻剪輯的過程中&#xff0c;經常會遇到將MP4視頻轉碼為MOV格式的情況。這不僅可以更好地編輯視頻&#xff0c;還可以提升視頻的播放質量和兼容性。對于大量視頻文件的轉碼操作&#xff0c;如何高效地完成批量轉碼呢&#xff1f;現在一起來看看云炫AI智剪如何智能轉碼&#…

Servlte+JSP企業內容管理系統

企業內容管理系統的設計與實現 1&#xff0e;系統概述: 隨著企事業單位信息化的建設&#xff0c;內聯網和外聯網之間的信息交互越來越多,優秀的內容管理系統對企業內部來說&#xff0c;能夠很好地做到信息的收集和重復利用及信息的增值利用。對于外聯網來說,內容管理系統可使…

6 Go的切片

概述 在上一節的內容中&#xff0c;我們介紹了Go的數組&#xff0c;包括&#xff1a;聲明數組、初始化數組、訪問數組元素等。在本節中&#xff0c;我們將介紹Go的切片。在Go語言中&#xff0c;數組的長度是固定的&#xff0c;不能改變&#xff0c;這在某些場景下使用不太方便。…

【C++】一文簡練總結【多態】及其底層原理&具體應用(21)

前言 大家好吖&#xff0c;歡迎來到 YY 滴C系列 &#xff0c;熱烈歡迎&#xff01; 本章主要內容面向接觸過C的老鐵 主要內容含&#xff1a; 歡迎訂閱 YY滴C專欄&#xff01;更多干貨持續更新&#xff01;以下是傳送門&#xff01; 目錄 一.多態的概念二.多態的實現1&#xff…

【C++】:拷貝構造函數與賦值運算符重載的實例應用之日期類的實現

C實現日期類 ├─屬性&#xff1a; │ ├─年份 │ ├─月份 │ └─日期 ├─方法&#xff1a; │ ├─構造函數 │ ├─拷貝構造函數 │ ├─析構函數 │ ├─設置年份 │ ├─設置月份 │ ├─設置日期 │ ├─獲取年份 │ ├─獲取月份 │ ├─獲取日期 │ ├…

websocket和mqtt

WebSocket是一種通信協議&#xff0c;它允許在瀏覽器和服務器之間建立持久連接&#xff0c;并允許雙向傳遞數據。MQTT則是一種輕量級的發布/訂閱消息傳輸協議&#xff0c;常用于物聯網(IoT)設備之間的通信。 &#xff08;1&#xff09;js能直接實現mqtt嗎&#xff0c;還是需…

已解決java.lang.IllegalStateException: Duplicate key

已解決java.lang.IllegalStateException: Duplicate key 文章目錄 報錯問題解決思路解決方法交流 報錯問題 java.lang.IllegalStateException: Duplicate key 解決思路 java.lang.IllegalStateException: Duplicate key 是由于在使用 Map 或 Set 時&#xff0c;試圖將一個已經…

十、sdl顯示yuv圖片

前言 SDL中內置加載BMP的API&#xff0c;使用起來會更加簡單&#xff0c;便于初學者學習使用SDL 如果需要加載JPG、PNG等其他格式的圖片&#xff0c;可以使用第三方庫&#xff1a;SDL_image 測試環境&#xff1a; ffmpeg的4.3.2自行編譯版本windows環境qt5.12sdl2.0.22&…

redis的性能管理和雪崩

redis的性能管理 redis的數據是緩存在內存當中的 系統巡檢&#xff1a; 硬件巡檢、數據庫、nginx、redis、docker、k8s 運維人員必須要關注的redis指標 在日常巡檢中需要經常查看這些指標使用情況 info memory #查看redis使用內存的指標 used_memory:11285512 #數據占用的…

最簡單的簡歷練習

代碼&#xff1a; <!DOCTYPE html> <html> <head> <title>我的簡歷</title> <style> body { background-image: url(https://picsum.photos/id/1018/1000/1000); background-size: cover; …

已解決java.lang.RuntimeException: java.io.IOException: invalid constant type: 18異常的正確解決方法,親測有效!!!

已解決java.lang.RuntimeException: java.io.IOException: invalid constant type: 18異常的正確解決方法&#xff0c;親測有效&#xff01;&#xff01;&#xff01; 文章目錄 報錯問題解決方法交流 報錯問題 java.lang.RuntimeException: java.io.IOException: invalid cons…

完美解決ERROR: Command errored out with exit status 1: command: ‘f:\program files\python\python36\pyt

完美解決ERROR: Command errored out with exit status 1: command: f:\program files\python\python36\pyt 下滑查看解決方法 文章目錄 報錯問題解決思路解決方法交流 報錯問題 ERROR: Command errored out with exit status 1: command: ‘f:\program files\python\python3…