目录
- 1. name + params
- 2. name + query
- 3. path + query
- 4. 路径字符串?拼接参数
- 5. 路径字符串 / 拼接参数
- 总结
下面方法刷新参数都不会丢失
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"> <h1>about</h1> </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"> <h1>about</h1> </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"> <h1>about</h1> </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"> <h1>about</h1> </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"> <h1>about</h1> </div> </template>
总结
到此这篇关于Vue3路由传参方法的文章就介绍到这了,更多相关Vue3路由传参内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客!
您可能感兴趣的文章:
- vue3中路由传参query、params及动态路由传参详解
- vue3.0 router路由跳转传参问题(router.push)
- vue3中使用router路由实现跳转传参的方法