天天看点

VUE中页面跳转的常用方式及返回上一页实现的两种方式

一、我们知道,如果是一个页面的某些部分切换变化,那不是网页之间的切换,而是子组件的切换;对于页面切换,我们需要知道的是整个页面的内容和路径都发生了改变。在原生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项目的某个组件中引入百度地图​​