vue-router路由参数获取

路由参数获取

意义在哪？

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

什么时候需要使用？

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

$route

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

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

动态路由

在我们需要同一个组件但数据不同时我们可以使用动态路由来实现。根据获取到的路由参数来渲染组件

获取params参数（/path/:key）

params参数/path/:key的形式表现，key是自定义的属性名

{
  path: "/path/:id" 
}

this.$route.params.key

查询qurey参数（url?key=value）

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

<router-link :to="'/path?id='+id"></router-link>
 <router-link :to="{path:'/path',query:{id:1}}"></router-link>
 <router-link :to="{name:'pathname',query:{id:1}}"></router-link>
  // get请求使用
 <router-link :to={name:'pathname',params:{id:1}}"></router-link>
    // 以上获取
 this.$route.query.id

this.$route.query.key  //获取qurey参数

两者的区别

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