路由参数的获取

一、路由参数获取

意义在哪？

获取到url中的参数然后利用参数发起ajax请求，然后获取我们想要的数据

什么时候需要使用？

如文章详情，商品详情，使用相同的组件，渲染不同的数据，我们就可以通过传递不同的路由参数，获取不同的数据，渲染相同的组件

1.1 $route

当我们使用路由时，vue-router会给我们所有的组件里都添加一个 data 叫 $route ，这个 $route 代表的是我们的路由信息

• path 路径
• fullPath 携带参数的完整路径
• query ?后的查询参数
• params 动态路由参数
• hash 哈希值 一般不用

1.2 动态路由

动态路由是以/path/:key的形式表现，key是自定义的属性名

{
  path: "/path/:id" 
}

1.2.1 获取动态路由中参数

获取参数，我们就可以通过ajax请求对应的后台接口，然后获取数据，设置给data渲染到页面中

this.$route.params.key

1.3 查询参数

所谓查询参数，就是 url 后面跟着的参数 url?key=value，所以我们可以使用 query 获取对应的值

url?key=value

this.$route.query.key

1.4 两者的区别

不管是动态路由还是还是查询参数，两者最终要实现的结果是相同的，获取数据的方式不同。当我们遇到需求时，想用哪种用哪种。