Vue路由(router-link)之高亮、動態(tài)傳參詳解
更新時間：2025年11月04日 08:44:25 作者：清夢壓星河_Ciao
文章介紹了如何使用Vue Router進(jìn)行聲明式導(dǎo)航,并詳細(xì)講解了如何通過`router-link`組件實現(xiàn)導(dǎo)航高亮、自定義高亮類名、查詢參數(shù)傳參和動態(tài)路由傳參,此外,還提到了動態(tài)路由參數(shù)的可選符
一、聲明式導(dǎo)航-導(dǎo)航鏈接
1.需求
實現(xiàn)導(dǎo)航高亮效果
如果使用a標(biāo)簽進(jìn)行跳轉(zhuǎn)的話，需要給當(dāng)前跳轉(zhuǎn)的導(dǎo)航加樣式，同時要移除上一個a標(biāo)簽的樣式，太麻煩！?。?/p>
2.解決方案
vue-router 提供了一個全局組件 router-link (取代 a 標(biāo)簽)
- 能跳轉(zhuǎn)，配置 to 屬性指定路徑(必須) 。本質(zhì)還是 a 標(biāo)簽 ，to 無需 #
- 能高亮，默認(rèn)就會提供高亮類名，可以直接設(shè)置高亮樣式
語法： 發(fā)現(xiàn)音樂
<div>
<div class="footer_wrap">
<router-link to="/find">發(fā)現(xiàn)音樂</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自帶的兩個樣式進(jìn)行高亮
使用router-link跳轉(zhuǎn)后，我們發(fā)現(xiàn)。當(dāng)前點擊的鏈接默認(rèn)加了兩個class的值 router-link-exact-active和router-link-active
我們可以給任意一個class屬性添加高亮樣式即可實現(xiàn)功能
二、聲明式導(dǎo)航-兩個類名
當(dāng)我們使用跳轉(zhuǎn)時，自動給當(dāng)前導(dǎo)航加了兩個類名
<style>
.router-link-active{
background-color: orange
}
</style>
1.router-link-active
模糊匹配（用的多）
to=“/my” 可以匹配 /my /my/a /my/b …
只要是以/my開頭的路徑 都可以和 to="/my"匹配到
2.router-link-exact-active
精確匹配
to=“/my” 僅可以匹配 /my
3.在地址欄中輸入二級路由查看類名的添加
三、聲明式導(dǎo)航-自定義類名（了解）
1.問題
router-link的兩個高亮類名 太長了，我們希望能定制怎么辦
2.解決方案
我們可以在創(chuàng)建路由對象時，額外配置兩個配置項即可。 linkActiveClass和linkExactActiveClass
const router = new VueRouter({
routes: [...],
linkActiveClass: "類名1",
linkExactActiveClass: "類名2"
})
3.代碼演示
// 創(chuàng)建了一個路由對象
const router = new VueRouter({
routes: [
...
],
linkActiveClass: 'active', // 配置模糊匹配的類名
linkExactActiveClass: 'exact-active' // 配置精確匹配的類名
})
總結(jié)：如何自定義router-link的兩個高亮類名
四、聲明式導(dǎo)航-查詢參數(shù)傳參
1.目標(biāo)
在跳轉(zhuǎn)路由時，進(jìn)行傳參
比如：現(xiàn)在我們在搜索頁點擊了熱門搜索鏈接，跳轉(zhuǎn)到詳情頁，需要把點擊的內(nèi)容帶到詳情頁，改怎么辦呢？
2.跳轉(zhuǎn)傳參
我們可以通過兩種方式，在跳轉(zhuǎn)的時候把所需要的參數(shù)傳到其他頁面中
- 查詢參數(shù)傳參
- 動態(tài)路由傳參
3.查詢參數(shù)傳參
- 如何傳參？
- 如何接受參數(shù)
- 固定用法：$route.query.參數(shù)名
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="/search?key=黑馬程序員">黑馬程序員</router-link>
<router-link to="/search?key=前端培訓(xùn)">前端培訓(xùn)</router-link>
<router-link to="/search?key=如何成為前端大牛">如何成為前端大牛</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>搜索關(guān)鍵字: {{ $route.query.key}}</p>
<p>搜索結(jié)果: </p>
<ul>
<li>.............</li>
<li>.............</li>
<li>.............</li>
<li>.............</li>
</ul>
</div>
</template>
<script>
export default {
name: 'MyFriend',
created () {
// 在created中，獲取路由參數(shù)
}
}
</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插件初始化
// 創(chuàng)建了一個路由對象
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')
五、聲明式導(dǎo)航-動態(tài)路由傳參
1.動態(tài)路由傳參方式
配置動態(tài)路由
動態(tài)路由后面的參數(shù)可以隨便起名，但要有語義
const router = new VueRouter({
routes: [
...,
{
path: '/search/:words',
component: Search
}
]
})
Home.vue
<div class="hot-link"> 熱門搜索： <router-link to="/search/黑馬程序員">黑馬程序員</router-link> <router-link to="/search/前端培訓(xùn)">前端培訓(xùn)</router-link> <router-link to="/search/如何成為前端大牛">如何成為前端大牛</router-link> </div>
Search.vue
<p>搜索關(guān)鍵字: {{ $route.params.word}}</p>
配置導(dǎo)航鏈接
- to=“/path/參數(shù)值”
- 對應(yīng)頁面組件接受參數(shù)
- $route.params.參數(shù)名
params后面的參數(shù)名要和動態(tài)路由配置的參數(shù)保持一致
2.查詢參數(shù)傳參 VS 動態(tài)路由傳參
查詢參數(shù)傳參 (比較適合傳多個參數(shù))
- 跳轉(zhuǎn)：to=“/path?參數(shù)名=值&參數(shù)名2=值”
- 獲?。?route.query.參數(shù)名
動態(tài)路由傳參 (優(yōu)雅簡潔，傳單個參數(shù)比較方便)
注意：動態(tài)路由也可以傳多個參數(shù)，但一般只傳一個
- 配置動態(tài)路由：path: “/path/:參數(shù)名”
- 跳轉(zhuǎn)：to=“/path/參數(shù)值”
- 獲?。?route.params.參數(shù)名
總結(jié)：聲明式導(dǎo)航跳轉(zhuǎn)時, 有幾種方式傳值給路由頁面？
- 查詢參數(shù)傳參（多個參數(shù)）
- 動態(tài)路由傳參（一個參數(shù)，優(yōu)雅簡潔）
六、動態(tài)路由參數(shù)的可選符(了解)
1.問題
配了路由 path:“/search/:words” 為什么按下面步驟操作，會未匹配到組件，顯示空白？
2.原因
/search/:words 表示，必須要傳參數(shù)。如果不傳參數(shù)，也希望匹配，可以加個可選符"？"
const router = new VueRouter({
routes: [
...
{ path: '/search/:words?', component: Search }
]
})
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Vue3 登錄狀態(tài)持久化方案詳解(Token 是什么)
本文給大家介紹Vue3登錄狀態(tài)持久化方案詳解包括Token 是什么的相關(guān)知識,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2026-02-02
這篇文章主要介紹了Vue之動態(tài)class的幾種寫法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
基于vue v-for 循環(huán)復(fù)選框-默認(rèn)勾選第一個的實現(xiàn)方法
下面小編就為大家分享一篇基于vue v-for 循環(huán)復(fù)選框-默認(rèn)勾選第一個的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue組件之間通信的七種方式,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
Vue使用new Image()實現(xiàn)圖片預(yù)加載功能
這篇文章主要介紹了如何在 Vue 中實現(xiàn)圖片預(yù)加載的一個簡單小demo以及優(yōu)化方案,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue中使用極驗驗證碼的方法（附demo）本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
詳解基于vue-cli3快速發(fā)布一個fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個fullpage組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
在前端開發(fā)中,列表的虛擬滾動是一種常見的優(yōu)化手段,可以大大提升頁面性能,在Vue3中,我們可以通過一些技巧來實現(xiàn)列表的虛擬滾動,本文將介紹如何使用Vue3實現(xiàn)列表的虛擬滾動,讓你的頁面加載更快、更流暢,需要的朋友可以參考下2024-09-09
vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法
vue3 集成 echarts 最大的坑就是出現(xiàn)了,reactive 的數(shù)據(jù) 刷新了,但圖表缺不會刷新,所以本文就給大家詳細(xì)的介紹一下vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法,需要的朋友可以參考下2023-08-08