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

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

苹果微信html页面缓存,Ios中微信页面返回上一页去除缓存几种常见思路
前言这篇文章主要讲解决思路,不对各种概念进行过多讲解. 问题描述开发微信H5页面的时候,在Ios微信内置浏览器中点击返回按钮返回上一页时,上一页面不会被刷新. 在浏览器缓存机制中,在返回上一页的操 ...
html ios返回后刷新页面,Ios中微信页面返回上一页去除缓存几种常见思路
前言这篇文章和第,.年过事工宗据指数遍互业经搞断果会主要讲解决思路,不对各种概念进行抖要支圈者器说是事天开的.年后编定功口小发还应久剑过多讲解. 问题描述开发微信H5页面的时候,在Ios微信内置浏 ...
vue中页面跳转传值_vue跳转方式（打开新页面）及传参操作示例
本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...
vue中页面跳转传值_vue的页面跳转方式和传值、取值
写业务中,从一个页面跳转到另一个页面,经常需要传值和取值,如何实现? 1.通过router-link进行跳转,传递方式: 使用query传递参数,路由必须使用path引入, 使用params传递参数, ...
vue中页面跳转传值_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
将本地项目上传到Github的两种方式 1.在线上传 2.使用Git客户端上传
文章目录注册GitHub账号并创建仓库上传本地项目到Github的方式一:在线上传上传本地项目到Github的方式二:使用Git客户端上传 Windows下安装Git客户端 Git配置本地用户名 ...
jsp页面返回上一页，在两个页面死循环
例子:a页面进入b页面,然后b页面进入c页面,c页面能返回到b页面,但是b页面返回不能到a页面,只能回到c页面,然后就是b,c页面之间返回的死循环. 一般我们写返回上一页面,用history.go(- ...
vue中页面跳转，显示在顶部
页面之间跳转,打开新的一个页面显示在顶部在main.js 中添加代码: router.afterEach((to, from, next) => {window.scrollTo(0, 0) ...
冒泡排序的两种方式c语言代码,【C语言】两种方式实现冒泡排序算法
题目要求编写一个C语言程序,实现基本的冒泡排序算法. 算法冒泡排序,用一句话来总结: 一组数中,相邻的两个数进行比较.交换,将最大(小)数交换至尾(首)部,即完成了一次冒泡排序要想对N个数字进行 ...

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

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

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

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

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

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

最新文章

热门文章