VUE中页面跳转的常用方式及返回上一页实现的两种方式「建议收藏」

大家好，欢迎来到IT知识分享网。

一、我们知道，如果是一个页面的某些部分切换变化，那不是网页之间的切换，而是子组件的切换；对于页面切换，我们需要知道的是整个页面的内容和路径都发生了改变。在原生JS中我们知道页面切换可以使用location href的方式。而在VUE中有两种常见的切换方式：

一种是router-link to=”路径”,问号后面是附加的传输数据，对应的页面也的按名字geohash来取。例如

<router-link :to="'/search?geohash='+this.data1.geohash">

<img id="imgTwo" src="../../src/components/imgs/zhinanzhen.png" alt="">

<p id="ptwo">搜索</p>

</router-link>

还有一种是编程式路由跳转：

this.$router.push({

name:"city"

})

二、返回上一页有两种方式，但是首先你得@click绑定一个methods的方法：

例如：

this.$router.go(-1);

或者

this.$router.back();

三、this.$router.resolve 实现在新窗口打开页面（并传参）

let routeData = this.$router.resolve({
    path: '/channelinfo',
    query: {
       gwsn: this.selectGwsn
    } //传值
});
window.open(routeData.href, '_blank');

上篇文章：call、apply、bind函数在改变函数运行时this的指向问题的区别

下篇文章：vue+element项目的某个组件中引入百度地图