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 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
详解Vue的options
May 15 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue router 动态路由清除方式
May 25 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
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
利用python实现在微信群刷屏的方法
2019/02/21 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python+django+rest框架配置创建方法
2019/08/31 Python
numpy 声明空数组详解
2019/12/05 Python
python 怎样进行内存管理
2020/11/10 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
返乡农民工证明
2015/06/24 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书