vue-router的动态路由

Vue Router的动态路由

Vue Router是Vue.js官方的路由管理器，它与之配套使用，能够实现在单页面应用中进行页面跳转和组件切换。Vue Router提供了多种路由模式，其中包括了动态路由。本文将主要介绍Vue Router的动态路由。

什么是动态路由？

动态路由是指路由路径中带有参数的路由配置方式。在实际应用中，需要根据不同的参数来动态渲染页面或组件。例如，一个新闻网站，需要将新闻内容展示在不同的页面中，这时就可以通过动态路由来实现。

在Vue Router中，动态路由的路径通常以冒号（:）开头。例如：

```javascript

{

path:'/news/:id',

component:NewsDetail

}

```

其中，:id表示动态参数，根据不同的参数id来渲染NewsDetail组件。

如何获取动态路由参数？

在Vue Router的路由跳转中，可以使用$router.push方法将参数传递到目标组件中。例如：

```javascript

//在NewsList组件中跳转到NewsDetail组件

this.$router.push({path:'/news/'+newsId})

```

在NewsDetail组件中，可以通过$route.params来获取动态路由参数。例如：

```javascript

//在NewsDetail组件中获取路由参数

this.$route.params.id

```

$route.params返回一个路由参数对象，键对应的是动态路由中冒号后的参数。

动态路由中的嵌套路由

除了简单的动态路由之外，Vue Router还支持嵌套路由。嵌套路由是指在动态路由的基础上，进一步在其下添加一个或多个子路由。嵌套路由的配置方式与普通路由的配置方式类似。例如：

```javascript

{

path:'/news/:id',

component:NewsDetail,

children:[

{

path:'comments',

component:Comments

}

]

}

```

其中，/news/:id为动态路由，comments为嵌套路由，Comments为对应的组件。

在组件中使用嵌套路由时，可以使用$route对象的matched数组来获取到当前路由和它的所有父级路由的配置信息。例如：

```javascript

//在Comments组件中获取当前路由和其父级路由的配置信息

this.$route.matched

```