How to jump with parameters in vue.js-Vue.js-php.cn

How to jump with parameters in vue.js

coldplay.xixi

Release： 2020-11-30 16:59:08

Original

3207 people have browsed it

Vue.js jump method with parameters: First create [readDetail.vue] and register the route in [index.js]; then jump through [router-link], or through [$router] 】 method to jump.

How to jump with parameters in vue.js

The operating environment of this tutorial: windows10 system, vue2.5.2, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

vue.js method of jumping with parameters:

First create readDetail.vue and register the route in index.js.

Page delivery method:

1. Jump through router-link

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

Copy after login

path -> is the routing path to be jumped, It can also be the name value configured in the routing file. Both can be used for routing navigation
##params -> is the parameter to be transmitted, and the parameter can be passed directly in the form of key:value
query -> The parameters are passed through the url and are also passed in the form of key:value

2. $router method jump

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

Copy after login

Acceptance method

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

Copy after login

Experiment (including two methods):

Transmission page:

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

Copy after login

Receive page:

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

Copy after login

Related free learning recommendations:
javascript (video)

The above is the detailed content of How to jump with parameters in vue.js. For more information, please follow other related articles on the PHP Chinese website!