vue2.0通过url传递参数

方法一：直接跳转

//html
<h3>
       <router-link to="/pageFive/zhagnsan/3322">1）路由配置传参方式</router-link>
</h3>

//路由配置
{
      path: '/pageFive/:name/:token',
      name: 'pageFive',
      component: pageFive
},

//取值
created(){    // 生命周期 - 创建完成（可以访问当前this实例）
     this.name= this.$route.params.name;     //取值并存储值
     this.token= this.$route.params.token;
},

方法二：通过按钮跳转至目的页面

//html
 <input type="text" v-model="name">
 <input type="text" v-model="token">
<span class="entBtn" v-on:click="entBtn">跳转按钮</span>

//js
data() {       //存放数据
      return {
        name: 'lisi',
        token: '123456789'
      }
},
methods: {     //存放各种方法
   entBtn: function () {
        alert('跳转至第六页面')
        this.$router.push({name: 'pageSix',params: { name: this.name,token:this.token 
   }});
      }
},

//路由配置
 {
      path: '/pageSix/:name/:token',
      name: 'pageSix',
      component: pageSix
    }

//取值
 created(){        // 生命周期 - 创建完成（可以访问当前this实例）
     this.name= this.$route.params.name;    //取值并存储值
     this.token= this.$route.params.token;
    },

github地址：https://github.com/liuyumei111/pro_name.git

下载时注意： 按照所需版本下载

本案例提交日期：Commits on Sep 28, 2018
本案例提交描述：通过url传递参数

效果图.png