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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 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
php 随机生成10位字符代码
2009/03/26 PHP
PHP查询网站的PR值
2013/10/30 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
删除重复数据的算法
2006/11/23 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python实现KNN邻近算法
2021/01/28 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
会计自荐书
2013/12/02 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
整改通知书
2015/04/20 职场文书
党委工作总结2015
2015/04/27 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
MongoDB支持的索引类型
2022/04/11 MongoDB
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python