方法一：直接跳转
//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
