Vue3的路由传参方法有哪些

这篇文章主要讲解了“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>

感谢各位的阅读，以上就是“Vue3的路由传参方法有哪些”的内容了，经过本文的学习后，相信大家对Vue3的路由传参方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！