vue常用的路由传参的实现方式

最新推荐文章于 2022-07-19 17:16:06 发布

前端-阿辉

最新推荐文章于 2022-07-19 17:16:06 发布

阅读量170

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vuejs 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/bigpatten/article/details/108474809

Vuejs 专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了在Vue.js中使用两种不同的方式来传递参数：一种是通过name和params，另一种是通过path和query。通过具体代码示例展示了如何在组件间进行参数的传递和接收，适用于需要在不同页面间传递数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一：通过name和params传递参数。

首先看一下效果：
在这里插入图片描述

在当前页面中：

<template>
  <div>
    <TestNum msg="测试页面" />
    <button @click="gogo">跳转</button>
  </div>
</template>

<script>
import TestNum from '@/components/textNum.vue'
export default {
  name: 'Test',
  components: {
    TestNum
  },
  methods: {
    gogo () {
      this.$router.push({
        name: 'Skip',
        params: {
          name: '张三',
          age: 22,
          sex: '男'，
          id: 1
        }
      })
    }
  }
}
</script>

跳转到指定页面后：

<template>
  <div>
    <p>你跳转到了当前页面</p>
    <button @click="ret">返回</button>
    <button @click="param">获取传递的参数</button>
    <p>名字: {{name}}</p>
    <p>年龄: {{age}}</p>
    <p>性别: {{sex}}</p>
    <p>名字id: {{id}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      age: '',
      sex: '',
      id: ''
    }
  },
  methods: {
    ret () {
      this.$router.push('/Test')
    },
    param () {
      var params = this.$route.params
      this.name = params.name
      this.age = params.age
      this.sex = params.sex
      this.id = params.id
    }
  }
}
</script>

方式二：通过path和query传递参数

将上方代码中的name和params替换成path和query就可以了，

在当前页面中如下：

methods: {
    gogo () {
      this.$router.push({
        path: '/Skip',
        query: {
          name: '张三',
          age: 22,
          sex: '男',
          id: 1
        }
      })
    }
  }

在跳转后的页面如下：

param () {
      var params = this.$route.query
      this.name = params.name
      this.age = params.age
      this.sex = params.sex
      this.id = params.id
    }