vuejs中跳转如何传参-前端问答-PHP中文网

vuejs中跳转如何传参

青灯夜游

发布： 2021-09-24 18:46:38

原创

2979人浏览过

vue跳转传参的方法：1、通过router-link标签的params或query属性进行跳转传参；2、通过“this.$router.push({name:'路由命名',params:{参数名:参数值..}})”语句进行跳转传参。

vuejs中跳转如何传参

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

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

传递页面方式：

1.通过router-link进行跳转

<router-link   
    :to="{  
        path: 'yourPath',     
        params: {   
            key: 'value', // orderNum : this.searchData.orderNo
        },  
        query: {  
           key: 'value', // orderNum : this.searchData.orderNo
        }  
    }">  
    <button type="button">跳转</button> 
</router-link> 

 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航  
 2. params -> 是要传送的参数,参数可以直接key:value形式传递  
 3. 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.参数名

实验(包含两种方式)：

传递页：

 <router-link :to="{ name: 'readDetail', params: { msgKeyOne: 'jump test.' }}">
                <button type="button">跳转</button>
              </router-link>
<button @click="sendParams">传递</button>
-----------------------------------------------------------------------------------------
export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },

登录后复制

接收页：

<p class="container">
    <p style="color:red;">Num：{{ myIndex }}</p>
    <p>{{ msg }}</p>
  </p>
-----------------------------------------------------------
data () {
      return {
        msg: '',
        // 保存传递过来的index
        myIndex: ''
      }
-----------------------------------------------------------
mounted: function () {
      this.msg = this.$route.params.msgKeyOne
      this.myIndex = this.$route.params.msgKey
      console.log(this.myIndex)
    }

登录后复制

实验结果：