vue3动态路由匹配

介绍

• 这是一个从组件一跳转到组件二的动态路由匹配实例
• 组件一中定义了路由中的params和query参数
• 组件二中接收路由中的params和query参数并显示在页面上

组件一

<script setup>
import { RouterLink } from "vue-router"
import { ref, reactive } from "vue"

const users = ref("users")
const to = reactive({
  name: "users",
  params: {
    id: 1
  },
  query: {
    queryid: "123"
  }
})
</script>

<template>
  <router-link :to="to">{{ users }}</router-link>
</template>

组件二

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
</script>

<template>
  <h1>User</h1>
  <h2>{{ route.query }}</h2>
  <h2>{{ route.params }}</h2>
</template>

router.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      name: "index",
      path: "/",
      component: () => import("../views/index.vue")
    },
    {
      name: "users",
      path: '/users/:id',
      component: () => import("../views/User.vue")
    },
  ]
})

export default router