vue3 如何实现路由传参跳转

在Vue3中，可以使用Vue Router来实现路由传参跳转。

第一步，安装Vue Router：

npm install vue-router@4.0.0-0

第二步，创建一个Vue Router实例：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    props: true // 开启props传参
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在上面的代码中，我们定义了两个路由，分别是`/`和`/about`。其中，`/about`路由开启了props传参。

第三步，使用`<router-link>`标签实现跳转：

<router-link to="/about?name=vue3">Go to About Page</router-link>

在上面的代码中，我们给`/about`路由传了一个参数`name`，值为`vue3`。

第四步，在目标组件中获取参数：

<template>
  <div>
    <h1>About Page</h1>
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  props: ['name']
}
</script>

在上面的代码中，我们通过props属性获取了传进来的参数`name`。

最后，我们可以通过Vue Router的`$route`对象来获取当前路由信息：

<template>
  <div>
    <h1>About Page</h1>
    <p>{{ $route.query.name }}</p>
  </div>
</template>

在上面的代码中，我们通过`$route.query.name`获取了`name`参数的值。