vue-router(vue路由)跳转及传递参数的方式
在做项目的时候需要从A页面跳转到B页面，并进行参数传递，于是查询官网了解到，vue路由跳转
主要有两种方式：一是，使用编程式的导航；二是：使用router-link。
由于项目中跳转时，有个axios请求，所以这里主要讲解使用编程式的导航
第一种是使用编程式的导航
使用编程的导航主要借助 router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)
对于router.push方法来说，有两种方式（注意二者的区别），一种是通过params；一种是query。
下面就二者区别进行讲解，前者需要对跳转路由进行命名，使用
this.$router.push({name:'跳转路由'}，params:{'参数'：'参数Value'})
后者不需要命名直接通过准确的路由地址即可
this.$router.push({path: '准去的路由地址'}，query:{'参数'：'参数Value'})
通过params：
直接上代码：
A页面（这里简化代码），包含一个axios请求，并传递参数
对跳转页面进行命名:
{path: '/App/AAA',name:'BBB',component:FootholdAnalysis},
data() {
return {
imageUrl: require("../../static/tianjia.png"),
dateValue1: "2018-09-08",
dateValue2: "2018-09-10",
features: undefined,
}
},
methods: {
handleClick(row){
var me=this;
var features;
this.axios.get(
'personnelface/common/AAA?face_img_url='+row.face_img_url)
.then(function(response){
if(response.data.code==0){
features=response.data.msg.feature;
me.$router.push({ name: 'BBB',
params:{
imageUrl:row.face_img_url,
dateValue1: me.dateValue1,
dateValue2:me.dateValue2,
features:features}
});
}
})
.catch(function (error) {
console.log(error);
});
}
}
B页面用于接收参数，并使用，最好创建B页面接收参数，写到created()方法内
data() {
return {
imageUrl: require("../../static/tianjia2.png"),
dateValue3: "2018-09-02",
dateValue4: "2018-09-28",
features:undefined,
}
},
created() {
if(this.$route.params.imageUrl){
//这里就可以接收参数，进行全局修改其他方法可以通过如this.dateValue3获取即可
this.dateValue3=this.$route.params.dateValue1;
this.dateValue4=this.$route.params.dateValue2;
this.imageUrl=this.$route.params.imageUrl;
this.features=this.$route.params.features;
}
},
通过query：
该方法与params方法的不同点在于使用准确的路由地址，通过query去获取参数。
A页面（传递参数）
data() {
return {
imageUrl: require("../../static/tianjia.png"),
dateValue1: "2018-09-08",
dateValue2: "2018-09-10",
features: undefined,
}
},
methods: {
handleClick(row){
var me=this;
var features;
this.axios.get(
'personnelface/common/AAA?face_img_url='+row.face_img_url)
.then(function(response){
if(response.data.code==0){
features=response.data.msg.feature;
me.$router.push({ path:'/App/AAA',
query:{
imageUrl:row.face_img_url,
dateValue1: me.dateValue1,
dateValue2:me.dateValue2,
features:features}
});
}
})
.catch(function (error) {
console.log(error);
});
}
}
B页面（接收参数）
data() {
return {
imageUrl: require("../../static/tianjia2.png"),
dateValue3: "2018-09-02",
dateValue4: "2018-09-28",
features:undefined,
}
},
created() {
if(this.$route.query.imageUrl){
//这里就可以接收参数，进行全局修改其他方法可以通过如this.dateValue3获取即可
this.dateValue3=this.$route.query.dateValue1;
this.dateValue4=this.$route.query.dateValue2;
this.imageUrl=this.$route.query.imageUrl;
this.features=this.$route.query.features;
}
},
第二种是使用router-link
router-link 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
- 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
- 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
- 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了