vue.js如何带参数跳转

PHP中文网 • 2025年3月13日 05:58:52 • 编程技术 • 阅读 2

vue.js带参数跳转的方法：首先创建【readDetail.vue】且在【index.js】中注册路由；然后通过【router-link】进行跳转，或者通过【$router】方式跳转。

本教程操作环境：windows10系统、vue2.5.2，本文适用于所有品牌的电脑。

【相关文章推荐：vue.js】

vue.js带参数跳转的方法：

首先创建readDetail.vue 且在index.js中注册路由。

立即学习“前端免费学习笔记（深入）”；

传递页面方式：

1.通过router-link进行跳转

登录后复制

path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航

params -> 是要传送的参数,参数可以直接key:value形式传递

query -> 是通过 url 来传递参数的同样是key:value形式传递

2. $router方式跳转

this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}}) this.$router.push({              path: 'yourPath',               name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',              params: {                   key: 'key',                   msgKey: this.msg              }              /*query: {                  key: 'key',                   msgKey: this.msg              }*/          })

登录后复制

接受方式

this.$route.params.参数名this.$route.query.参数名

登录后复制

实验(包含两种方式)：

传递页：

                               -----------------------------------------------------------------------------------------export default {    name: 'reads',    data () {      return {        msg: 'msg test.'      }    },

登录后复制

接收页：

    Num：{{ myIndex }}
    {{ msg }}
  
-----------------------------------------------------------data () {      return {        msg: '',        // 保存传递过来的index        myIndex: ''      }-----------------------------------------------------------mounted: function () {      this.msg = this.$route.params.msgKeyOne      this.myIndex = this.$route.params.msgKey      console.log(this.myIndex)    }

登录后复制