Vue__0">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
的区别
VueRouter_29">3.1 $router
可以看到$router
是全局路由VueRouter
实例
3.2 $route
是存放路由信息的一个对象, 传递的数据都是存放在$route
中
Vue_37">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');
更多推荐