Vue3的路由传参方法超全汇总

1、在路由路径中传递参数

在路由路径中传递参数是最基本的方法。在定义路由时，可以在路由路径中使用/:参数名表示该参数。例如：

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

在上面的代码中，我们定义了一个名为id的参数，使用时路由路径类似于/user/123，其中的123就是该参数的值。

可以在$route对象中获取到该参数的值，示例代码如下：

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

2、使用路由的查询字符串传递数据

路由的查询字符串是一种传递数据的非常简单的方法。在访问路由时，只需要在路由后面加上?参数名=参数值即可。例如：

const router = new VueRouter({
  routes: [
    { path: '/user', component: User }
  ]
})

// 访问/user?name=John&age=20

可以在$route.query对象中获取到这些参数的值。

<template>
  <div>
    User Name: {{ $route.query.name }}<br>
    User Age: {{ $route.query.age }}
  </div>
</template>

3、在路径和查询字符串中同时传递参数

可以同时在路径和查询字符串中传递参数。例如：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

// 访问/user/123?name=John&age=20

可以在$route.params和$route.query中获取到这些参数的值。

<template>
  <div>
    User ID: {{ $route.params.id }}<br>
    User Name: {{ $route.query.name }}<br>
    User Age: {{ $route.query.age }}
  </div>
</template>

4、在路由元信息中传递参数

路由元信息是一种用于描述路由的元数据。可以在路由中添加meta字段来存储该数据。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      meta: {
        requireAuth: true
      }
    }
  ]
})

在上面的代码中，我们添加了一个名为requireAuth的元信息。

可以在路由组件中通过$route.meta对象来获取该元信息的值。

<template>
  <div v-if="$route.meta.requireAuth">
    This user requires authentication.
  </div>
</template>

示例1：在路由路径中传递参数的应用

例如，我们定义了一个名为User的组件，在该组件内部通过$route.params.id获取到路由传递的id参数的值，并显示出来。

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

示例2：在路由元信息中传递参数的应用

在我们的应用中，有些路由需要用户登陆才能访问。我们可以在这些路由上添加元信息requireAuth: true，并在用户未登陆时显示一些提示信息。

首先在路由定义中添加meta字段：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { requireAuth: true } // 添加元信息
  }
]

在Home组件的mounted()函数中判断是否需要登陆，代码示例：

<script>
  export default {
    mounted() {
      if (this.$route.meta.requireAuth && !this.isLoggedin()) {
        this.$router.push('/login')
      }
    },
    methods: {
      isLoggedin() {
        // 判断用户是否登陆
      }
    }
  }
</script>