vuejs中怎么实现跳转传参

这篇文章将为大家详细讲解有关vuejs中怎么实现跳转传参,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是一家专注于网站建设、成都网站设计与策划设计,新城网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:新城等地区。新城做网站价格咨询:18980820575

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

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

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

传递页面方式:

1.通过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.参数名

实验(包含两种方式):

传递页:

 
                跳转
              
传递
-----------------------------------------------------------------------------------------
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)     }

关于“vuejs中怎么实现跳转传参”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页标题:vuejs中怎么实现跳转传参
当前网址:http://scyanting.com/article/jspocj.html