这篇文章主要讲解了“Vue3的路由传参方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3的路由传参方法有哪些”吧！
下面方法刷新参数都不会丢失
1. name + params
路由配置(需要配置成动态路由形式，原先的直接传参不能用了)
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">
<h2>about</h2>
</div>
</template>2. name + query
路由配置（普通形式即可，query会将参数?拼接到路径上）
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">
<h2>about</h2>
</div>
</template>3. path + query
路由配置（普通形式即可，query会将参数?拼接到路径上）
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">
<h2>about</h2>
</div>
</template>4. 路径字符串？拼接参数
路由配置
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">
<h2>about</h2>
</div>
</template>5. 路径字符串 / 拼接参数
路由配置
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">
<h2>about</h2>
</div>
</template>