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

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尔嵘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值