DAY6-----vue路由传递参数方法？

传递参数通常有两种主要方式：动态路由和查询参数。（下面的写法都是在template中，如果在script中使用的话，要创建router实例，引入useRouter）

1. 动态路由

在动态路由中，参数会被包含在路由的路径中。你可以在路由定义时使用冒号 : 来指定动态参数，然后在路由跳转时将参数传递给路由。

定义动态路由：

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

跳转到动态路由并传递参数：

<router-link :to="'/user/' + userId">User</router-link>

2. 查询参数

查询参数是以 ? 开头的键值对，可以在路由中传递额外的参数信息。在路由跳转时，你可以使用 query 选项传递查询参数。

跳转并传递查询参数：

<router-link :to="{ path: '/user', query: { id: 123 }}">User</router-link>

在目标组件中，你可以通过 $route.query 访问传递的查询参数。

组合使用

有时候，你可能需要同时使用动态路由和查询参数来传递参数。

定义带查询参数的动态路由：

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

跳转并传递参数：

<router-link :to="{ path: '/user/' + userId, query: { name: 'Alice' }}">User</router-link>

在目标组件中，你可以通过 $route.params 访问动态路由参数，通过 $route.query 访问查询参数。

（直接写在路径后面的，用来传递动态路由。将路径与参数分开写的为传递查询参数）

如下：<router-link :to="{ path: '/user', query: { id: 123 }}">User</router-link>

注意：params是直接包含在路由路径中的，可在路由变化时保留值，刷新也不会丢失。query是跟在url后面的键值对，刷新会丢失掉（临时的）