Vue3的路由傳參方法超全匯總

更新時(shí)間：2023年04月23日 16:20:28 作者：小輝吖～

vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3路由傳參方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. name + params

路由配置(需要配置成動(dòng)態(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會(huì)將參數(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會(huì)將參數(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>