Home  >  Article  >  Web Front-end  >  How to jump with parameters in vue.js

How to jump with parameters in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-11-10 09:25:403166browse

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>
  • 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  
            }*/  
        })

Acceptance method

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

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;
      }
    },

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)
    }

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn