vue3路由配置以及路由跳轉(zhuǎn)傳參詳解
1、安裝路由
npm i vue-router
2、編寫需要展示的路由
在src目錄下創(chuàng)建pages文件夾，里面創(chuàng)建兩個(gè)vue文件命名為student.vue,person.vue
分別編寫兩個(gè)vue文件
student.vue和person.vue
<template>
學(xué)生
</template>
<script setup>
</script>
<style scoped lang="less">
</style><template> 人類 </template> <script setup> </script> <style scoped lang="less"> </style>
3、配置路由
在src目錄下配置router.js文件
import { createRouter,createWebHistory } from "vue-router";
const router=createRouter({
history:createWebHistory(),
routes:[
{
component:()=>import('../pages/person.vue'),
name:'person',
path:'/person'
},
{
component:()=>import('../pages/student.vue'),
name:'student',
path:'/student'
},
{
//實(shí)現(xiàn)路由重定向，當(dāng)進(jìn)入網(wǎng)頁(yè)時(shí)，路由自動(dòng)跳轉(zhuǎn)到/student路由
redirect:'/student',
path:'/'
}
]
})
export default router3、使用路由
在main.js中使用路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')在app.vue中進(jìn)行路由展示，使用router-link進(jìn)行路由跳轉(zhuǎn)，to代表跳轉(zhuǎn)到哪個(gè)路由
<template>
<router-view></router-view>
<hr>
<div>
<router-link to="/student">到student路由</router-link>
<br>
<router-link to="/person">到person路由</router-link>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>效果如下圖所示，點(diǎn)擊（到student路由）或（到person路由）會(huì)進(jìn)行路由跳轉(zhuǎn)
4、編程式路由
聲明式路由通過(guò)router-link進(jìn)行路由跳轉(zhuǎn)，編程式路由通過(guò)函數(shù)實(shí)現(xiàn)
修改app.vue，vue3使用的是組合式API，需要引入
要引入useRouter,useRoute,還要
const router=useRouter()
const route=useRoute()
<template>
<router-view></router-view>
<hr>
<div>
<button @click="toStudent">到student路由</button>
<br>
<button @click="toPerson">到person路由</button>
</div>
</template>
<script setup>
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()
const toStudent=()=>{
router.push('student')
}
const toPerson=()=>{
router.push('person')
}
</script>
<style scoped>
</style>通過(guò)router.push進(jìn)行路由跳轉(zhuǎn)
路由之間用router路由器，當(dāng)前路由使用toute路由
結(jié)果如下圖所示，實(shí)現(xiàn)編程式路由跳轉(zhuǎn)
如果在配置路由時(shí)沒(méi)有設(shè)置別名，需要通過(guò)router.push配置對(duì)象進(jìn)行跳轉(zhuǎn)
const toStudent=()=>{
router.push({
path:'/student'
})
}
const toPerson=()=>{
router.push({
path:'/person'
})
}5、路由傳參
5、1query參數(shù)傳遞
向student路由傳遞id,name
const toStudent=()=>{
router.push({
path:'/student',
query:{
id:1,
name:'張三'
}
})
}student路由接收query參數(shù)
<template>
學(xué)生組件
<div>{{data.query}}</div>
</template>
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
query: route.query
})
</script>效果如下圖所示
5、2傳遞params參數(shù)
假設(shè)向person路由傳遞params參數(shù)，要在路由配置時(shí)進(jìn)行修改
params傳參需要使用name進(jìn)行指定路由
const toPerson=()=>{
router.push({
name:'person',
params:{
keyword:2
}
})
}同時(shí)在路由配置需要修改，假設(shè)傳遞的是keyword，
需要在path使用占位符加關(guān)鍵字
？表示可傳可不傳
{
component:()=>import('../pages/person.vue'),
name:'person',
path:'/person/:keyword?'
},在person.vue中接收params參數(shù)
<template>
人類組件
<div>{{data.params.keyword}}</div>
</template>
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
params: route.params
})
</script>效果如下所示
6、子路由配置
給student路由添加子組件(stu1，stu2組件)
子組件的path不帶 /
{
component:()=>import('../pages/student.vue'),
name:'student',
path:'/student',
children:[
{
path:'stu1',
name:'stu1',
component:()=>import('../pages/stu1.vue')
},
{
path:'stu2',
name:'stu2',
component:()=>import('../pages/stu2.vue')
},
{
path:'',
component:()=>import('../pages/stu1.vue')
}
]
}編寫stu1組件
<template> stu1 </template> <script setup> </script> <style scoped lang="less"> </style>
編寫stu2組件
<template> stu2 </template> <script setup> </script> <style scoped lang="less"> </style>
在student組件進(jìn)行子組件展示
<template>
學(xué)生組件
<div>{{data.query}}</div>
子組件展示
<router-view></router-view>
<router-link to="/student/stu1">到stu1</router-link>
<router-link to="/student/stu2">到stu2</router-link>
</template>
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
query: route.query
})
</script>通過(guò)使用router-link進(jìn)行路由跳轉(zhuǎn)，也可以通過(guò)編程式路由跳轉(zhuǎn)
to="/student/stu1" 需要使用完整路徑進(jìn)行跳轉(zhuǎn)
效果展示
總結(jié)
到此這篇關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的文章就介紹到這了,更多相關(guān)vue3路由配置及跳轉(zhuǎn)傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的簡(jiǎn)單步驟
- Vue3中關(guān)于路由規(guī)則的props配置方式
- vue3 vite pinia配置動(dòng)態(tài)路由、解決刷新頁(yè)面路由消失的問(wèn)題
- vue3配置router路由并實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能
- Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
- vite?vue3下配置history模式路由的步驟記錄
- vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例
- Vue3?路由配置與導(dǎo)航實(shí)戰(zhàn)教程
相關(guān)文章
關(guān)于vxe-table復(fù)選框翻頁(yè)選中問(wèn)題及解決
這篇文章主要介紹了關(guān)于vxe-table復(fù)選框翻頁(yè)選中問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼
Vue 3 中的 nextTick 主要通過(guò) Promise 實(shí)現(xiàn)異步調(diào)度,返回一個(gè) Promise 對(duì)象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue混入使用和選項(xiàng)合并，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
這篇文章主要介紹了vue中使用rem布局的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的示例代碼
這篇文章主要介紹了Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的方法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
一文搞懂Vue3中toRef和toRefs函數(shù)的使用
這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法，文中通過(guò)示例為大家進(jìn)行了詳細(xì)的講解，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07
element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue中設(shè)置背景圖片和透明度的簡(jiǎn)單方法
在做項(xiàng)目的時(shí)候常需要設(shè)置背景圖片和透明度,下面這篇文章主要給大家介紹了關(guān)于Vue中設(shè)置背景圖片和透明度的簡(jiǎn)單方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決的相關(guān)資料,公司項(xiàng)目監(jiān)聽(tīng)系統(tǒng)中發(fā)現(xiàn)一個(gè)高頻錯(cuò)誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒(méi)有提示,需要的朋友可以參考下2023-09-09
淺談vue引用靜態(tài)資源需要注意的事項(xiàng)
今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09