vue页面路由跳转我主要是用以下几种方式，跳转页面需要提前将页面路径配置在路由中。
# router-link
# 当前页面跳转
当前页面跳转时，可以通过路由名字或者路由路径跳转，使用params传递参数，参数不会暴露，使用query，参数会暴露在地址中，数据泄露，不安全。
使用路由名字跳转，参数隐藏：
<router-link :to="{ name: '跳转到页面的路由名字', params: { id: 1 }}">当前页面跳转，参数隐藏传递</router-link>
1
使用路由路径跳转，参数隐藏：
<router-link :to="{ path: '跳转到页面的路由路径', params: { id: 1 }}">当前页面跳转，参数隐藏传递</router-link>
1
使用路由名字跳转，参数暴露：
<router-link :to="{ name: '跳转到页面的路由名字', query: { id: 1 }}">当前页面跳转，参数暴露传递</router-link>
1
使用路由路径跳转，参数暴露：
<router-link :to="{ path: '跳转到页面的路由路径', query: { id: 1 }}">当前页面跳转，参数暴露传递</router-link>
1
# 页面跳转并新建页面
新建页面时，发现只能用query暴露传递参数，使用params传递新页面接收不到传递的值，显示为undefined
使用路由名字跳转，参数暴露：
<router-link target="_blank" :to="{ name: '跳转到页面的路由名字', query: { id: 1 }}">新建页面打开，参数暴露传递</router-link>
1
使用路由路径跳转，参数暴露：
<router-link target="_blank" :to="{ path: '跳转到页面的路由路径', query: { id: 1 }}">新建页面打开，参数暴露传递</router-link>
1
# methods中定义跳转方法
# 当前页面跳转
通过router.push实现跳转，在需要跳转处调用该方法，并且可以记录原页面，支持页面返回，传值支持params和query。
使用路由名字跳转
toNewPage() {
var params = {};
params.id = id;
sessionStorage.setItem("backPath", this.$route.path);
this.$router.push({
name: '跳转到页面的路由名字',
params: params})
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
使用路由路径跳转
toNewPage() {
var params = {};
params.id = id;
sessionStorage.setItem("backPath", this.$route.path);
this.$router.push({
path: '跳转到页面的路由路径',
params: params})
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 页面跳转并新建页面
通过router.resolve实现跳转，在需要跳转处调用该方法，传值仅支持query。
使用路由名字跳转
toNewPage() {
window.open(this.$router.resolve({name: '跳转到页面的路由名字'}).href,'_blank')
}
1
2
3
2
3
使用路由路径跳转
toNewPage() {
window.open(this.$router.resolve({path: '跳转到页面的路由路径'}).href,'_blank')
}
1
2
3
2
3
# 新页面接收参数
无论是通过params还是query传参，在新页面中都通过this.$route.params和this.$route.query获取。