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 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
javascript Excel操作知识点
2009/04/24 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python的mysqldb安装步骤详解
2017/08/14 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python 格式化输出百分号的方法
2019/01/20 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
python如何支持并发方法详解
2020/07/25 Python
Python中生成ndarray实例讲解
2021/02/22 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
为什么使用接口?
2014/08/13 面试题
周鸿祎:教你写创业计划书
2013/12/30 职场文书
省三好学生申请材料
2014/01/22 职场文书
给实习单位的感谢信
2014/02/01 职场文书
会计系毕业求职信
2014/08/07 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers