Vue路由跳转传参或打开新页面跳转的方法总结

1. 通过路由中的name属性

使用params传递参数, 使用this.$route.params获取参数

这种方式传递相当于post请求, 传递的数据不会显示在url地址栏,但是页面刷新,参数会丢失

// 传递参数
this.$router.push({
name: \”首页\”,
params: {
code: 1
}
})
// 获取参数
this.$route.params

2. 通过路由属性中的path属性

使用query传递参数, 使用this.$route.query获取参数

这种方式相当于get请求, 传递的参数会显示在url地址栏, 页面刷新,参数还保留在url上面

// 传递参数
this.$router.push({
path: \”/dashboard\”,
query: {
code: 1
}
})
// 获取参数
this.$route.query

在获取传递参数的时候都是使用this.$route

3. $router 和 $route的区别

$router可以看到$router是全局路由VueRouter实例

$route是存放路由信息的一个对象, 传递的数据都是存放在$route中

4. 在Vue项目中点击跳转打开一个新的页面

使用this.$router.resolve({path: "/login"})可以获取到指定的路由的信息

使用window.open(routeData.href, '_blank')在新窗口中打开指定的路由页面

query:{code: 1}传递参数, 但是可以在url地址栏中看到传递的参数

通过this.$route.query获取参数

let routeData = this.$router.resolve({ path: \’/login\’,query: {loginName}});
window.open(routeData.href, \’_blank\’);

vue的跳转（打开新页面）

router-link跳转

// 直接写上跳转的地址
<router-link to=\”/detail/one\”>
<span class=\”spanfour\” >link跳转</span>
</router-link>
// 添加参数
<router-link :to=\”{path:\’/detail/two\’, query:{id:1，name:\’vue\’}}\”>
</router-link>
// 参数获取
id = this.$route.query.id
// 新窗口打开
<router-link :to=\”{path:\’/detail/three\’, query:{id:1，name:\’vue\’}}\” target=\”_blank\”>
</router-link>

this.$router.push/replace跳转

toDeail (e) {
this.$router.push({path: \”/detail\”, query: {id: e}})
}
// 参数获取
id = this.$route.query.id
toDeail (e) {
this.$router.push({name: \”/detail\”, params: {id: e}})
}
// 注意地址需写在 name后面
//参数获取，params和query区别，query参数在地址栏显示，params的参数不在地址栏显示
id = this.$route.params.id

resolve跳转

//resolve页面跳转可用新页面打开
//2.1.0版本后，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了
toDeail (e) {
const new = this.$router.resolve({name: \’/detail\’, params: {id: e}})
window.open(new.href,\’_blank\’)
}