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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
关于js与php互相传值的介绍
2013/06/25 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
python二叉树的实现实例
2013/11/21 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python 在函数上添加包装器
2020/07/28 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
专科文秘应届生求职信
2013/11/18 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
总经理任命书
2014/03/29 职场文书
企业管理标语
2014/06/10 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
教师个人培训总结
2015/02/11 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
基于python实现银行管理系统
2021/04/20 Python
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
我的收音机情缘
2022/04/05 无线电