Home > Web Front-end > Vue.js > body text

How to jump with parameters in vue.js

coldplay.xixi
Release: 2020-11-30 16:59:08
Original
3019 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

  
     
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:'路由命名',params:{参数名:参数值,参数名:参数值}})
 this.$router.push({  
            path: 'yourPath',   
            name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',  
            params: {   
                key: 'key',   
                msgKey: this.msg  
            }  
            /*query: {  
                key: 'key',   
                msgKey: this.msg  
            }*/  
        })
Copy after login

Acceptance method

this.$route.params.参数名
this.$route.query.参数名
Copy after login

Experiment (including two methods):

Transmission page:

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

Receive page:

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!