vue页面跳转如何实现 vue页面跳转实现代码

vue页面跳转如何实现？本篇文章小编给大家分享一下vue页面跳转实现代码，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

一、this.$router.push()

1、vue

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来引入。

User


Register

2、跳转后页面

watch:{
   $route(to,from){
      //刷新页面
      this.$router.go(1);
   }  
}