vue 页面跳转的实现方式

一、this.$router.push()

1、vue

template>
      div id='test'>
        button @click='goTo()'>
    点击跳转4/button>
      /div>
    /template>
      

2、script

//跳转前页面传参数：goTo(ITem) {
  //storageData中数据用于跳转到下一个页面之后，进行返回时能够返回到跳转之前的页面  let storageData = {
    se@R_512_2413@Words: 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跳转页面的几种方法(推荐)
• vue实现未登录跳转到登录页面的方法
• vue跳转方式（打开新页面）及传参操作示例
• Vue页面跳转传递参数及接收方式
• vue跳转页面常用的4种方法与区别小结

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！