VUE项目中路由导航如何传递参数

---

前言

本文利用一个简易网易云导航小案例，带你了解路由导航如何传递参数！

路由的传参方式大致分为两类，分别是 声明式导航传参 以及 编程式导航传参
下面分别为大家具体介绍这两类传参方式

---

一、声明式导航传参

有两种方式

1.查询字符串

在router-link上的to属性传值，语法格式：to="/path?参数名=值"

  <router-link to="/find?name=杨帆&age=21">发现音乐</router-link>

接收参数仅需在要跳转到的组件内，写 $route.query.参数名 来接收传递过来的值
find组件代码

 <template>
  <div>
    find组件 这是声明式导航通过查询字符串方式传递过来的参数 <br>
    {{$route.query.name}}{{ $route.query.age }} <br>
  </div>
</template>

<script>
export default {}
</script>

<style scoped></style>

案例中 要跳转到 find 组件，并且传递两个参数值 name 和 age ,对应的在 find 组件中 就可以通过$route.query.参数名来接收两个 参数

find 组件代码

<template>
  <div>
    find组件 这是声明式导航通过查询字符串方式传递过来的参数 <br>
    {{$route.query.name}}{{ $route.query.age }} <br>
  </div>
</template>

<script>
export default {}
</script>

<style scoped></style>

2.动态路由参数

语法格式 to="/path/值" 但是需要提前配置路由对象

<router-link to="/my/杨帆/21">我的音乐</router-link>

配置路由对象 path: “/part/:name”, 有:的路径代表要接收的参数值

const routes = [
  {
    // 匹配的路径
    path: '/',
    // 重定向到find组件
    redirect: '/find'
  },
  {
    path: '/find',
    name: 'find',
    component: find
  },
  //这一条是在配置路由 准备接收 两个参数 name 和 age 
  {
    path: '/my/:name/:age',
    name: 'my',
    component: my
  },

配置完以后就要开始接收参数了，在要跳转的页面 使用 $route.params.参数名
my组件代码

<template>
  <div>
    my组件 这是声明式导航通过动态路径参数方式传递过来的参数 <br>
    {{ $route.params.name }}{{ $route.params.age }}
  </div>
</template>

<script>
export default {}
</script>

<style></style>

案例中要跳转到 my 组件，并且传递两个参数值 name 和 age ,配置好路由后，在 my 组件中 就可以通过$route.params.参数名来接收两个 参数

3.二者对比

从结果图来看，第二种动态路径方式 在路径上显得更简洁干净
http://localhost:8081/#/find?name=杨帆&age=21 和 http://localhost:8081/#/my/杨帆/21
从传参过程看，第二种动态路径方式需要多配置一个路由对象

二、编程式导航传参

编程式导航通过组件的 name 或者 path 进行跳转
如果是用 name 进行跳转的话，可以用query 或者 params 传参
但是如果用 path 跳转的话，只能用 query 传参， 原因是 path 会自动忽略掉 params 的参数
所以接下来介绍两种组合 name + params 以及 path + query

1.path + query

 <a @click.prevent="goFriend('/part', 'part')">朋友</a>

goFriend (path, name) {
      this.$router.push({
        path: path,
        query: {
          name: '杨帆',
          age: '21'
        }
      })
    }

在 part 组件中 通过 $route.query.name 接收参数

<template>
<div>
    part组件 这是编程式导航通过 path + query 方式传递过来的参数 <br>
    {{ $route.query.name }}{{ $route.query.age }}
</div>
</template>

<script>
export default {}
</script>

<style>
</style>

通过编程式导航想要跳转到 part 组件，利用 path + query 的组合 传递，在part 组件中利用 $route.query.name 接收

2.name + params

<a @click.prevent="goShop('/shop', 'shop')">商城</a>

goShop (path, name) {
      this.$router.push({
        name: name,
        params: {
          name: '杨帆',
          age: '21'
        }
      })
    }

在 shop 组件中 通过 $route.params.name 接收参数

<template>
  <div>
    shop组件 这是编程式导航通过 path + query 方式传递过来的参数 <br>
    {{ $route.params.name }}{{ $route.params.age }}
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

通过编程式导航想要跳转到 shop 组件，利用 name + params 的组合传递参数，在shop 组件中利用 $route.params.name 接收

3. 二者区别

从结果图上发现，name + params 在传参的时候，传递的参数并不会在路径上显示，有很好的隐蔽性
但是 参数在路径上显示 有时候也并非是坏事，页面刷新的时候，路径上有参数的参数不会失效，参数不在路径上的，参数会失效
例如 name + params 传参后 刷新页面 参数会消失

总结

两种导航方式分别对应两种传参方式

创作不易 点赞关注支持作者！