vue3中路由寫法與傳參方式的超詳細指南
Vue Router 是 Vue.js 官方的路由管理器。它主要用于單頁面應(yīng)用程序（SPA, Single Page Application）中，幫助解決頁面導(dǎo)航、組件復(fù)用等問題。
基本的使用
1.router配置文件代碼
創(chuàng)建一個ts文件,用來寫路由器
// 創(chuàng)建一個路由器,并暴露出去
// 引入路由配置文件
import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
// 引入可能呈現(xiàn)的組件
import person from '@/components/person.vue'
import button from '@/view或pages/button.vue'
import detail from '@/view或pages/detail.vue'
// 創(chuàng)建路由器
const router = createRouter({
// 必須要寫,路由的工作模式 history/Hash
// history: createWebHashHistory(),
history: createWebHistory(),
// 路由規(guī)則
routes: [
/* 路由規(guī)則格式如下:
其中path 和 component是必填項, 其他選填
{
path: '/路徑',
component: aComponent, 對應(yīng)的組件,后面展示不同的寫法
name: 'name',
...其他配置
},
*/
{
path: '/person',
component: person
},
{
path: '/table',
component: () => import('@/view或pages/table.vue')
},
{
path: '/button',
component: button
},
{
path: '/news',
name: 'news',
component: () => import('@/view或pages/news.vue'),
children: [
{
path: 'detail',
component: detail
}
]
},
]
})
export default router路由模式: 通常用history的更多
history: url不帶#,但是需要服務(wù)端配合處理路徑問題
hash: url帶# 不需要服務(wù)器處理路徑問題,但是SEO優(yōu)化方面較差
嵌套路由
有的時候我們路由展示了一個組件,但是這個組件里面還有別的路由組件,這時候需要使用嵌套路由
// 如果有子路由(嵌套路由),寫在children里面
// 其寫法跟正常的路由是一樣的,但子路由的路徑,不用加一開始的/
// 這個路由最終路徑為 /news/testDetail
{
path: '/news',
name: 'xinwen',
component: () => import('@/view或pages/news.vue'),
children: [
{
name: 'testDetail',
path: 'detail/:id/:title/:content',
component: detail
},
/* 其他子路由
{
}
*/
]
},路由重定向
將特定的路徑，重新定向到已有路由,通常是用于默認展示某某內(nèi)容使用的
下面的代碼意思是,當路徑為 / 的時候, 將會重定向訪問到 /demo
{
path:'/',
redirect:'/demo'
}
2.使用router
main.ts中,我們需要使用router
import router from './router/index'
const app =createApp(App)
app.use(router)
app.mount('#app')
在需要使用router的頁面,使用RouterLink和RouterView來顯示對應(yīng)的vue頁面
<template>
<div class="app">
<h2 class="title">Vue路由測試</h2>
<!-- 導(dǎo)航區(qū) -->
<div class="navigate">
<RouterLink to="/table" active-class="active">表格</RouterLink>
<RouterLink to="/button" active-class="active">按鈕</RouterLink>
<RouterLink to="/news" active-class="active">新聞</RouterLink>
</div>
<!-- 展示區(qū) -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="App">
import {RouterLink,RouterView} from 'vue-router'
</script>RouterLink 是用于定義導(dǎo)航鏈接的,它類似于 HTML 中的 <a> 標簽。點擊RouterLink 時，Vue Router 會動態(tài)更新視圖，而不會重新加載整個頁面。值得注意的是,RouterLink標簽需要有一個to屬性,也就是點擊它后,給路由器的一個標識 (如何找到對應(yīng)組件)
RouterView用于顯示當前路由對應(yīng)的組件,也就是把渲染出來的組件,放在對應(yīng)頁面的哪一個位置上。
to的寫法
<!-- 第一種：to的字符串寫法 直接寫路徑的字符串 -->
<router-link active-class="active" to="/home">主頁</router-link>
<!-- 第二種：to的對象寫法 -->
<router-link active-class="active"
:to="{
path:'/home',
// 其他配置等 ......
}"
>
Home
</router-link>
<router-link active-class="active"
:to="{
name:'detail',
// 其他配置等 ......
}"
>
Detail
</router-link>通常還是對象寫法用的更多一點,因為功能性更強 (可以使用name來路由, 傳參等等)
Replace屬性
replace屬性能夠設(shè)置在路由跳轉(zhuǎn)時,瀏覽器操作歷史記錄的模式 (push/replace)
push: 歷史記錄入棧
push是默認的模式,支持瀏覽器的返回和前進。每次導(dǎo)航都會向瀏覽器的歷史棧添加一個新的記錄。
replace:歷史記錄直接替換
新的路由會替換當前的歷史記錄條目，而不是添加一個新的。這樣做的結(jié)果是，如果用戶點擊了后退按鈕，他們將不會回到剛剛從該頁面導(dǎo)航之前的位置，而是跳轉(zhuǎn)到更早的一個歷史記錄條目。
默認是push,如果想要開啟replace,只需要標簽上加上這個屬性
<RouterLink replace .......>News</RouterLink>
路由傳參
傳遞和接收參數(shù)的關(guān)鍵是 route 對象。route 對象包含了當前路由的所有信息，包括路徑、參數(shù)、查詢字符串等。為了在組件中訪問這些信息，Vue Router 提供了 useRoute 鉤子。我們后續(xù)傳參會經(jīng)常用到它
1.Query參數(shù)
眾所周知,query參數(shù)就是在路徑后拼上鍵值對,如 /路徑?id=1&name=Eve&age=18 因此我們可以直接在路徑上拼,或者是在to的對象中,用query來聲明
發(fā)送
<!-- 跳轉(zhuǎn)并攜帶query參數(shù)（to的字符串寫法） -->
<router-link to="/person/detail?id=1&name=Eve&age=18">
跳轉(zhuǎn)
</router-link>
<!-- 跳轉(zhuǎn)并攜帶query參數(shù)（to的對象寫法） -->
<RouterLink
:to="{
//name:'ren', //用name也可以跳轉(zhuǎn)
path:'/person/detail',
query:{
id:1,
name: 'Eve',
age: 18
}
}"
>
顯示人
</RouterLink>接收
我們通過useRoute()來獲取到當前組件的路由信息,接著把query取出來就行了
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query參數(shù)
const a = route.query
console.log(route.query.name); // Eve
console.log(route.query.age); // 18
2.Params參數(shù)
我主要是學(xué)后端的,我感覺這個params參數(shù)就跟請求里面的那個PathVariable有一些相似之處,都是通過路徑來傳參的
路由的配置
注意點1:params參數(shù)需要在路由規(guī)則中占位; 注意點2:to中只能用name來進行路由跳轉(zhuǎn),path不行
我這里主要是想傳到testDetail里面, 可以看到我打算傳三個,id,title,content,
傳什么,就寫 /:參數(shù)名
{
path: '/news',
name: 'xinwen',
component: () => import('@/view或pages/news.vue'),
children: [
{
name: 'testDetail',
path: 'detail/:id/:title/:content',
component: detail
}
]
},
發(fā)送
注意:參數(shù)必須按照路由中的順序傳 且不能少傳
<!-- 直接拼到路徑中,會按照占位去賦值 -->
<RouterLink :to="`/news/detail/001/新聞001/內(nèi)容001`">{{newsItem.title}}</RouterLink>
<RouterLink :to="{
name:'testDetail', //用name跳轉(zhuǎn),不能用path
params:{
id:newItem.id,
title:newItem.title,
content:newItem.content
}
}">
{{ newItem.title }}
</RouterLink>
少傳會報錯,導(dǎo)致功能無法使用
接收
與query非常相似,只不過是取的params
import { useRoute } from 'vue-router'
let route = useRoute()
console.log(route.params);
3.Props參數(shù)
路由的props配置
如果想要傳props參數(shù),需要在路由規(guī)則里面配置,它并不是單純的在RouterLink上面寫的,而是需要RouterLink上傳入params參數(shù)
{
name:'xiang',
path:'detail/:id/:title/:content',
component:Detail,
// props的對象寫法，作用：把對象中的每一組key-value作為props傳給Detail組件
// 但是數(shù)據(jù)就是寫死的了,因此用的很少
// props:{a:1,b:2,c:3},
// props的布爾值寫法，作用：把收到了每一組"params"參數(shù)，作為props傳給Detail組件
// 如果寫了true,那么正常按照params參數(shù)寫就行,但是接收的地方可以通過defineProps來接
// props:true
// props的函數(shù)寫法，作用：把返回的對象中每一組key-value作為props傳給Detail組件
props(route){
// return route.query 想傳別的回去也行,但我們直接傳params回去
return route.params
}
}接收
接收就是正常的props參數(shù)接收的方法 defineProps
<script lang="ts" setup namespace="Detail">
import { ref,toRefs} from 'vue'
import { useRoute } from 'vue-router'
let route = useRoute()
const props=defineProps({
id: String,
title: String,
content: String
})
const {id,title,content}=toRefs(props)
</script>
編程式導(dǎo)航
路由的編程式導(dǎo)航是指通過 JavaScript 代碼來控制頁面的導(dǎo)航，而不是通過 <RouterLink> 組件。編程式導(dǎo)航提供了更大的靈活性，可以在特定條件下觸發(fā)導(dǎo)航操作，或者在導(dǎo)航前后執(zhí)行一些邏輯。
import {useRouter} from 'vue-router'
// 找到路由器
const router = useRouter()
function clickToRoute(name:string){
/*
這里是路由器的兩種工作模式,push和replace選取自己需要的模式
參數(shù)的話跟RouterLink的to寫法是一樣的
可以直接傳字符串路徑,也可以寫對象....
支持傳參
*/
// router.replace('/demo')
router.push({name:name})
}以上就是vue3中路由寫法與傳參方式的超詳細指南的詳細內(nèi)容，更多關(guān)于vue3路由寫法與傳參方式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue中nextTick函數(shù)和react類似實現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實現(xiàn)異步調(diào)度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實現(xiàn)代碼,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)多級菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了vue路由--網(wǎng)站導(dǎo)航功能詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細介紹了Vue自定義指令的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue2實現(xiàn)封裝動態(tài)表單組件，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
Vue3?＜script?setup?lang=“ts“＞?的基本使用
<script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時語法糖，本文主要講解<script setup>?與?TypeScript?的基本使用，感興趣的朋友跟隨小編一起看看吧2022-12-12
本文主要介紹了vue封裝jquery修改自身及兄弟元素的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue 中引用gojs繪制E-R圖的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue中axios實現(xiàn)數(shù)據(jù)交互與跨域問題
這篇文章主要介紹了vue中axios實現(xiàn)數(shù)據(jù)交互與跨域問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
vue中數(shù)據(jù)不響應(yīng)的問題及解決
這篇文章主要介紹了vue中數(shù)據(jù)不響應(yīng)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09