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

一、this.$router.push()

1、vue

点击跳转4

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);

}

}