vue+herf+传参

vue中通过路由传参，可以使用$route对象或者使用vue-router的方式进行传参。其中vue-router传参的方式更为灵活，具有更好的扩展性和可维护性。

在vue-router中可以使用params和query两种方式进行传参。params方式是通过路由参数的方式进行传递，参数会被编码在URL路径中，使用方便，但是参数较多时URL会变得非常长，不太美观。query方式则是通过查询参数的方式进行传递，参数会被编码在URL查询参数中，URL比较简洁，但是相对于params方式稍微麻烦一些。

使用params方式进行传参时，在路由中需要添加动态路径参数，例如:

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

在组件中可以通过$route.params.id来获取参数。例如，在User组件中使用如下方式获取参数：

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

使用query方式进行传参时，需要在路由中使用query字符串，并在组件中通过$route.query获取参数。例如：

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

在组件中使用如下方式获取参数：

<template>
    <div>User id is: {{ $route.query.id }}</div>
</template>

需要注意的是，在使用query方式进行传参时，参数不会被编码在URL路径中，而是被编码在URL查询字符串中，可以通过$route.query来获取参数值。