vue 页面跳转的实现方式


Posted in Vue.js onJanuary 12, 2021

一、this.$router.push()

1、vue

<template>
  <div id='test'>
    <button @click='goTo()'>点击跳转4</button>
  </div>
</template>

2、script

//跳转前页面传参数:
goTo(item) {
  //storageData中数据用于跳转到下一个页面之后,进行返回时能够返回到跳转之前的页面
  let storageData = {
    searchWords: this.keyWord,
    pageSize: this.paging.pageSize,
    pageNo: this.paging.currentPage 
  };
  //data中数据用于将本页面中数据通过跳转功能将其应用到下一个页面,与父子组件传值同理
  let data = {
    type: item.srcType,
    tableName: item.tableName,
    name: item.datasourceName,
    tableId: item.tableId,
    id: item.datasourceId,
  };
  //将下一个页面中将会用到的数据全部push到$router中
  this.$router.push({
    //name表示跳转之后的资源前端访问路径,query用于存储待使用数据,其中page是本页面name,
    name: 'onlineSearch',
    query: {targetData: data ,storageData,
      page:'search',
      isBackSelect: true,
      goBackName:'dataSearch'
    }
  })    
}

3、跳转后的页面中获取上个页面的参数值

//跳转后页面获取参数:
mounted() {
  //查看是否已经参数是否传至跳转之后的页面,若传入,则根据需求进行调用
  console.log(this.$route.query.targetData;)
}

4、从跳转后的页面返回跳转前页面

//将返回函数写到methods中
goBackSheet() {
  if(this.$route.query.goBackName === 'dataSearch'){
    this.$router.push({
      name: this.pageName,
      query: {
        storageData: this.$route.query.storageData,
        isBackSelect: true,
      }
    });
  }
}

二、router-link跳转

1、 通过 to 属性指定目标地址

query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数;

query 刷新 不会 丢失 query里面的数据;

query要用path来引入。

params相当于post请求,参数不会再地址栏中显示;

params 刷新 会 丢失 params里面的数据;

params要用name来引入。

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}" @click.native='goTo'>User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}" @click.native='goTo'>Register</router-link>

2、跳转后页面

watch:{
   $route(to,from){
      //刷新页面


this.$router.go(1);
   }  
}

以上就是vue 页面跳转的实现方式的详细内容,更多关于vue 页面跳转的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
vue实现防抖的实例代码
Jan 11 #Vue.js
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
You might like
对盗链说再见...
2006/10/09 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
jquery 年会抽奖程序
2011/12/22 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python下载的库包存放路径
2020/07/27 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
python实现定时发送邮件
2020/12/23 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
上海期货面试题
2014/01/31 面试题
关于人生的感言
2014/01/17 职场文书
征婚广告词
2014/03/17 职场文书
爱情保证书大全
2014/04/29 职场文书
党校毕业心得体会
2014/09/13 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python