一、路由跳转传参

跳转路由时可能需要携带参数。

一、需求

有的时候,当我们改变从一个路由跳转到另一个路由时,需要传递参数。例如我希望点击消息列表中的其中一条消息,跳转到对应消息的详情界面,那么跳转是就要给消息详情界面传递该消息的id,从而从数据库中获取该条消息的详细信息。

二、实现

1、通过点击router-link跳转传参

这种方式实现路由传参,必须在定义路由时就指定参数的名称,例如:
在router的配置文件index.js中,定义singleMessage组件路由,参数为id:
在这里插入图片描述
如果要传递多个参数,直接在path后加‘/:参数名称’即可,例如我还要携带一个叫content的参数:
在这里插入图片描述
跳转后的组件接收:

 //在js中
 this.$route.params.id
 //在template中
 $route.params.id

这里方便演示,直接在template中获取id,SingleMessage组件:

<template>
  <div class="singleMessage">
    <h1>消息id为: {{$route.params.id}}</h1>
  </div>
</template>

<script>
export default {
  name: "SingleMessage"
}
</script>

<style scoped>

</style>

在消息列表中定义一个router-link,跳转到SingleMessage,且携带参数为id:
在这里插入图片描述
效果:
点击该router-link:(成功跳转,且SingleMessage组件成功获取到了id)
在这里插入图片描述
该实现方式必须在定义路由时确定参数个数和名称,并且在router-link中声明对应参数的值。
当然也可以通过函数进行跳转,将id作为函数参数,在函数中路由跳转,效果与点击router-link一样:

this.$router.push({
        path: `/singleMessage/1`
      })

2、通过路由名name和params进行传递

在定义路由时不用定义参数,但必须确定路由名称name:
在这里插入图片描述
定义一个跳转按钮:

<button @click="singleMessage()">消息2</button>

singleMessage函数:

    singleMessage(){
      this.$router.push({
        name: 'SingleMessage',
        params:{
          id: 2
        }
      })
    }

SingleMessage组件中接收id参数与方式1一样:

<template>
  <div class="singleMessage">
    <h1>消息id为: {{$route.params.id}}</h1>
  </div>
</template>

<script>
export default {
  name: "SingleMessage"
}
</script>

<style scoped>

</style>

点击跳转按钮:
在这里插入图片描述
可以看到,地址栏并没有参数的值,所以当刷新当前页面后,参数失效。
刷新页面(参数失效):
在这里插入图片描述

3、通过path和query来传递参数

路由定义与方式二一样,不需要声明参数,也可以不声明name,因为该方式只是用到了path属性。
直接在定义router-link:

<router-link :to="{path: '/singlemessage',query:{id:3}}">消息3</router-link>

这与函数效果一样:

      this.$router.push({
        path: '/singlemessage',
        query:{
          id: 3
        }
      })

在SingleMessage组件中接收,不在使用$route.params.id,而是$route.query.id

<template>
  <div class="singleMessage">
    <h1>消息id为: {{$route.query.id}}</h1>
  </div>
</template>

<script>
export default {
  name: "SingleMessage"
}
</script>

<style scoped>

</style>

点击router-link,效果:
在这里插入图片描述
点击刷新,参数仍然存在,所以对比方式二,该方式用户体验更好。

这就是vue-router之间传参的三种方式,可以看到,可以直接在router-link中指定跳转的path、name和参数值,也可以通过函数中调用$router.push()来进行跳转。

其中,方式一和方式三刷新跳转后的页面,参数不会失效,但是方式二刷新后,当前页面跳转的参数会失效。

Logo

前往低代码交流专区

更多推荐