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"> <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路由傳參內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3使用vue-router的完整步驟記錄
- vue3獲取url地址參數的示例詳解
- vue3配置router路由並實現頁面跳轉功能
- vue3在自定義hooks中使用useRouter報錯的解決方案
- vue3獲取當前路由地址