• 售前

  • 售后

热门帖子
入门百科

vue 页面跳转的实现方式

[复制链接]
或许你会吞 显示全部楼层 发表于 2021-10-25 19:04:04 |阅读模式 打印 上一主题 下一主题
一、this.$router.push()

1、vue
  1. <template>
  2.   <div id='test'>
  3.     <button @click='goTo()'>点击跳转4</button>
  4.   </div>
  5. </template>  
复制代码
2、script
  1. //跳转前页面传参数:
  2. goTo(item) {
  3.   //storageData中数据用于跳转到下一个页面之后,进行返回时能够返回到跳转之前的页面
  4.   let storageData = {
  5.     searchWords: this.keyWord,
  6.     pageSize: this.paging.pageSize,
  7.     pageNo: this.paging.currentPage
  8.   };
  9.   //data中数据用于将本页面中数据通过跳转功能将其应用到下一个页面,与父子组件传值同理
  10.   let data = {
  11.     type: item.srcType,
  12.     tableName: item.tableName,
  13.     name: item.datasourceName,
  14.     tableId: item.tableId,
  15.     id: item.datasourceId,
  16.   };
  17.   //将下一个页面中将会用到的数据全部push到$router中
  18.   this.$router.push({
  19.     //name表示跳转之后的资源前端访问路径,query用于存储待使用数据,其中page是本页面name,
  20.     name: 'onlineSearch',
  21.     query: {targetData: data ,storageData,
  22.       page:'search',
  23.       isBackSelect: true,
  24.       goBackName:'dataSearch'
  25.     }
  26.   })   
  27. }
复制代码
3、跳转后的页面中获取上个页面的参数值
  1. //跳转后页面获取参数:
  2. mounted() {
  3.   //查看是否已经参数是否传至跳转之后的页面,若传入,则根据需求进行调用
  4.   console.log(this.$route.query.targetData;)
  5. }
复制代码
4、从跳转后的页面返回跳转前页面
  1. //将返回函数写到methods中
  2. goBackSheet() {
  3.   if(this.$route.query.goBackName === 'dataSearch'){
  4.     this.$router.push({
  5.       name: this.pageName,
  6.       query: {
  7.         storageData: this.$route.query.storageData,
  8.         isBackSelect: true,
  9.       }
  10.     });
  11.   }
  12. }
复制代码
二、router-link跳转

1、 通过 to 属性指定目的所在

  query相当于get请求,页面跳转的时间,可以在所在栏看到请求参数;
  query 革新 不会 丢失 query内里的数据;
  query要用path来引入。
  params相当于post请求,参数不会再所在栏中表现;
  params 革新 会 丢失 params内里的数据;
  params要用name来引入。
  1. <!-- 命名的路由 -->
  2. <router-link :to="{ name: 'user', params: { userId: 123 }}" @click.native='goTo'>User</router-link>
  3. <!-- 带查询参数,下面的结果为 /register?plan=private -->
  4. <router-link :to="{ path: 'register', query: { plan: 'private' }}" @click.native='goTo'>Register</router-link>
复制代码
2、跳转后页面
  1. watch:{
  2.    $route(to,from){
  3.       //刷新页面
  4.       this.$router.go(1);
  5.    }  
  6. }
复制代码
以上就是vue 页面跳转的实现方式的具体内容,更多关于vue 页面跳转的资料请关注脚本之家其它相干文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作