談?wù)剬ue?Router的理解
更新時間：2022年11月08日 09:20:36 作者：Java陳序員
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了對Vue?Router的理解,需要的朋友可以參考下
1.1 相關(guān)理解
1.1.1 vue-router 的理解
Vue 的一個插件庫，專門用來實現(xiàn) SPA 應(yīng)用
1.1.2 對 SPA 應(yīng)用的理解
- 單頁
Web應(yīng)用（single page web application，SPA） - 整個應(yīng)用只有一個完整的頁面
- 點擊頁面中的導(dǎo)航鏈接不會刷新頁面，只會做頁面的局部更新
- 數(shù)據(jù)需要通過
Ajax請求獲取
1.1.3 路由的理解
什么是路由
一個路由就是一組映射關(guān)系（key-value）key為路徑,value可能是function或component路由分類
后端路由：理解：
value是function, 用于處理客戶端提交的請求工作過程：服務(wù)器接收到一個請求時,根據(jù)請求路徑找到匹配的函數(shù)來處理請求,返回響應(yīng)數(shù)據(jù)
2.前端路由：
理解：
value是component，用于展示頁面內(nèi)容工作過程：當瀏覽器的路徑改變時,對應(yīng)的組件就會顯示。
1.2 基本路由
1.2.1 安裝與使用
安裝
vue-router，命令：npm install vue-router應(yīng)用插件：
Vue.use(VueRouter)
編寫 router 配置項：
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 組件
import About from '../components/About'
import Home from '../components/Home'
//創(chuàng)建router實例對象，去管理一組一組的路由規(guī)則
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
- 實現(xiàn)切換（
active-class可配置高亮樣式）
<router-link active-class="active" to="/about">About</router-link>
- 指定展示位置
<router-view></router-view>
幾個注意點：
路由組件通常存放在
pages文件夾，一般組件通常存放在components文件夾通過切換，“隱藏”了的路由組件，默認是被銷毀掉的，需要的時候再去掛載
每個組件都有自己的
$route屬性，里面存儲著自己的路由信息整個應(yīng)用只有一個
router，可以通過組件的$router屬性獲取到
1.2.2 總結(jié)
編寫使用路由的 3 步
- 定義路由組件
- 注冊路由
- 使用路由
1.3 嵌套（多級）路由
- 配置路由規(guī)則，使用
children配置項：
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通過children配置子級路由
{
path:'news', //此處一定不要寫：/news
component:News
},
{
path:'message',//此處一定不要寫：/message
component:Message
}
]
}
]跳轉(zhuǎn)（要寫完整路徑）：
<router-link to="/home/news">News</router-link>
1.4 路由傳參
1.4.1 路由的 query 參數(shù)
- 傳遞參數(shù)
<!-- 跳轉(zhuǎn)并攜帶query參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳轉(zhuǎn)</router-link>
<!-- 跳轉(zhuǎn)并攜帶query參數(shù)，to的對象寫法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳轉(zhuǎn)</router-link>- 接收參數(shù)：
$route.query.id $route.query.title
1.4.2 命名路由
作用：可以簡化路由的跳轉(zhuǎn)。
- 如何使用
給路由命名：
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //給路由命名
path:'welcome',
component:Hello,
}
]
}
]
}簡化跳轉(zhuǎn)：
<!--簡化前，需要寫完整的路徑 -->
<router-link to="/demo/test/welcome">跳轉(zhuǎn)</router-link>
<!--簡化后，直接通過名字跳轉(zhuǎn) -->
<router-link :to="{name:'hello'}">跳轉(zhuǎn)</router-link>
<!--簡化寫法配合傳遞參數(shù) -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳轉(zhuǎn)</router-link>1.4.3 路由的 params 參數(shù)
- 配置路由，聲明接收
params參數(shù)
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符聲明接收params參數(shù)
component:Detail
}
]
}
]
}- 傳遞參數(shù)
<!-- 跳轉(zhuǎn)并攜帶params參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail/666/你好">跳轉(zhuǎn)</router-link>
<!-- 跳轉(zhuǎn)并攜帶params參數(shù)，to的對象寫法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳轉(zhuǎn)</router-link>特別注意：路由攜帶
params參數(shù)時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！
- 接收參數(shù)：
$route.params.id $route.params.title
1.4.4 路由的 props 配置
作用：讓路由組件更方便的收到參數(shù)
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一種寫法：props值為對象，該對象中所有的key-value的組合最終都會通過props傳給Detail組件
// props:{a:900}
//第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數(shù)通過props傳給Detail組件
// props:true
//第三種寫法：props值為函數(shù)，該函數(shù)返回的對象中每一組key-value都會通過props傳給Detail組件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}1.4.5 <router-link> 的 replace 屬性
- 作用：控制路由跳轉(zhuǎn)時操作瀏覽器歷史記錄的模式
- 瀏覽器的歷史記錄有兩種寫入方式：分別為
push和replace，push是追加歷史記錄，replace是替換當前記錄。路由跳轉(zhuǎn)時候默認為push - 如何開啟
replace模式：<router-link replace .......>News</router-link>
1.5 編程式路由導(dǎo)航
this.$router.push(path): 相當于點擊路由鏈接(可以返回到當前路由界面)this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面)this.$router.back(): 請求(返回)上一個記錄路由this.$router.go(-1): 請求(返回)上一個記錄路由this.$router.go( 1 ): 請求下一個記錄路由
到此這篇關(guān)于談?wù)剬ue Router的理解的文章就介紹到這了,更多相關(guān)Vue Router內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vue 解決異步數(shù)據(jù)更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細介紹了在Vue中如何實現(xiàn)自定義hooks(組合式)函數(shù)，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關(guān)于Vue中前后端使用WebSocket的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了vue+Echart實現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解Vscode中使用Eslint終極配置大全，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時，攜帶參數(shù)跳轉(zhuǎn)，本文將詳細介紹vue路由傳參的三種方式，這三種傳參方式只是針對vue?Router?V3版本的,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)
在本篇文章和里小編給各位總結(jié)了關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式以及相關(guān)代碼，需要的朋友們可以學(xué)習(xí)下。2020-05-05
這篇文章主要介紹了vue中父子組件的參數(shù)傳遞和應(yīng)用示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了Vue中的虛擬DOM、diff算法、key的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04