1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > VUE中页面跳转的常用方式及返回上一页实现的两种方式

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

时间:2021-06-27 19:51:12

相关推荐

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项目的某个组件中引入百度地图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。