vue动态路由传参

Vue是一种现代的、高效的、流行的前端开发框架，它尤其擅长构建单页应用。在Vue中，通过路由可以实现单页应用中不同页面的切换。随着单页应用的复杂度增加，需要为路由传递参数，以便在不同页面之间传递数据。这里我们主要讨论Vue中动态路由传参的方式。

1. 路由传参基础

在Vue中，通过路由传递参数可以使用两种方式：query和params。query传递参数是通过URL的?后面加参数的方式，例如：

```

router.push({ path: '/path', query: { key: value }})

```

在目标组件中使用this.$route.query即可获取参数。params传递参数是通过路由路径中的:参数名来传递，例如：

```

router.push({ path: '/path/:id', params: { id: 123 }})

```

在目标组件中使用this.$route.params即可获取参数。

2. 动态路由传参

静态路由是指事先定义好的路由路径，例如：

```

const routes = [

{

path: '/user/:id',

component: User

}

]

```

这里的/user/:id是静态路由，:id是参数。

动态路由是指在代码中添加新路由的方式。例如：

```

const router = new VueRouter()

router.addRoutes([{

path: '/user/:id',

component: User

}])

```

这里的/user/:id是动态路由。接下来我们就讨论动态路由传参的方式。

3. 在params中传递参数

在动态路由中，将参数传递给params很简单。例如：

```

router.addRoutes([{

path: '/user/:id',

component: User

}])

router.push({ path: `/user/${id}`, params: { key: value }})

```

在目标组件中将可以获取id和key对应的value值。使用params传递参数的好处是传递参数更安全，因为参数被编码在URL中，不容易被窃取。

4. 在query中传递参数

使用query传递参数也是在动态路由中常见的方式。例如：

```

router.addRoutes([{

path: '/user/:id',

component: User

}])

router.push({ path: `/user/${id}`, query: { key: value }})

```

在目标组件中将可以获取id和key对应的value值。相对于params传递方式，query传递方式的好处是传递参数更简单，不需要在路由定义中定义参数。但也需要注意，query传递参数的方式不如params安全。

5. 使用函数返回动态路由

有时我们需要根据一些条件生成新的路由，这时可以使用函数返回动态路由。例如：

```

function createRoute (id) {

return {

path: `/user/${id}`,

component: User

}

}

router.addRoutes([createRoute(id)])

```

这里的createRoute函数接受一个id参数，返回一个路由对象。使用函数返回动态路由的好处是可以更灵活地创建新路由。

6. 总结

Vue动态路由传参有两种方式：使用params和使用query。使用params传递方式传递的参数安全性更高，但需要在路由定义中定义参数；使用query传递方式传递的参数更加简便，但相对不如params安全。使用函数返回动态路由的方式可以更灵活地创建新路由。