一、路由参数获取

意义在哪?

获取到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 两者的区别

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

Logo

前往低代码交流专区

更多推荐