Vue3的路由傳參方法超全匯總
更新時間：2023年04月23日 16:20:28 作者：小輝吖～
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時,攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3路由傳參方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
下面方法刷新參數(shù)都不會丟失
1. name + params
路由配置(需要配置成動態(tài)路由形式，原先的直接傳參不能用了)
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about/:id',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router組件A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push({
name: 'about',
params: {
id: 100,
},
})
}
return {
toAbout,
}
},
}
</script>
<template>
<main>
<button @click="toAbout">to About</button>
</main>
</template>組件B
<script>
import { useRoute } from 'vue-router'
export default {
name: 'about',
setup() {
const route = useRoute()
console.log('99999999', route.params)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>2. name + query
路由配置（普通形式即可，query會將參數(shù)?拼接到路徑上）
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router組件A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push({
name: 'about',
query: {
id: 100,
},
})
}
return {
toAbout,
}
},
}
</script>
<template>
<main>
<button @click="toAbout">to About</button>
</main>
</template>組件B
<script>
import { useRoute } from 'vue-router'
export default {
name: 'about',
setup() {
const route = useRoute()
console.log('99999999', route.query)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>3. path + query
路由配置（普通形式即可，query會將參數(shù)?拼接到路徑上）
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router組件A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push({
path: '/about',
query: {
id: 100,
},
})
}
return {
toAbout,
}
},
}
</script>
<template>
<main>
<button @click="toAbout">to About</button>
</main>
</template>組件B
<script>
import { useRoute } from 'vue-router'
export default {
name: 'about',
setup() {
const route = useRoute()
console.log('99999999', route.query)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>4. 路徑字符串？拼接參數(shù)
路由配置
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router組件A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push('/about?id=100')
}
return {
toAbout,
}
},
}
</script>
<template>
<main>
<button @click="toAbout">to About</button>
</main>
</template>組件B
<script>
import { useRoute } from 'vue-router'
export default {
name: 'about',
setup() {
const route = useRoute()
console.log('99999999', route.query)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>5. 路徑字符串 / 拼接參數(shù)
路由配置
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about/:id',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router組件A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push('/about/100')
}
return {
toAbout,
}
},
}
</script>
<template>
<main>
<button @click="toAbout">to About</button>
</main>
</template>組件B
<script>
import { useRoute } from 'vue-router'
export default {
name: 'about',
setup() {
const route = useRoute()
console.log('99999999', route.params)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>總結(jié)
到此這篇關(guān)于Vue3路由傳參方法的文章就介紹到這了,更多相關(guān)Vue3路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇vue2 全局變量的設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了淺談Vue組件及組件的注冊方法，詳細的介紹了什么是組件，及其組件注冊的兩種方式(全局和局部)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要為大家詳細介紹了Vue的樣式綁定，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue3+vuedraggable實現(xiàn)動態(tài)配置頁面
這篇文章主要為大家詳細介紹了Vue3如何利用vuedraggable實現(xiàn)動態(tài)配置頁面,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的可以參考一下2023-12-12
很多時候使用vue開發(fā)的項目,由于無法在低版本瀏覽器上運行,所以需要解決下,下面這篇文章主要給大家介紹了關(guān)于vue對于低版本瀏覽器兼容問題的解決思路,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue.js中實現(xiàn)登錄控制的方法,結(jié)合實例形式分析 vue.js操作登陸頁面流程控制相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,對于程序員來說bug調(diào)試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關(guān)于Vue環(huán)境搭建報錯整理的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能示例
這篇文章主要介紹了vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能,結(jié)合實例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
vue跳轉(zhuǎn)頁面常用的4種方法與區(qū)別小結(jié)
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面常用的4種方法與區(qū)別,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue項目配置代理如何解決跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01