Vue全家桶学习—VueRouter跳转传参

一、路由跳转传参

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

一、需求

有的时候，当我们改变从一个路由跳转到另一个路由时，需要传递参数。例如我希望点击消息列表中的其中一条消息，跳转到对应消息的详情界面，那么跳转是就要给消息详情界面传递该消息的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()来进行跳转。

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