Vue 路由跳转和跳转在新窗口打开以及query 和 params 传参方式
Vue 路由跳转配置:openDetails(val){this.$router.push({path: "/design-teamwork-task",query: {projectDetails: val},//或者name: 'designTeamworkTa...
·
Vue 路由跳转配置:
openDetails(val){
this.$router.push({
path: "/design-teamwork-task",
query: {
projectDetails: val
},
//或者
name: 'designTeamworkTask',
params: {
projectDetails: val
}
});
},
这里注意有两种传参方式:
一种是 query ,传参的数据会在导航栏中显示;另一种是通过 params 传参,传参数据不会在导航栏中显示,同时需要给路由添加 name 属性。
Vue跳转在新开窗口打开需要配置:
enterClick(){
const {href} = this.$router.resolve({
path: '/file-preview',
query: {
pdf: JSON.stringify(this.pdf)
}
})
window.open(href, '_blank')
},
注意:
采用 resolve 来打开新窗口,这里分别采用两种传参方式来处理,发现在新窗口中,mounted 生命周期中,打印 this.$route 可以看到 通过 params 无法进行传参,传递过来的是空对象,而 query 依然可以正常使用。
如果我们通过 list 路由 跳转至 detail 路由
if (this.$route.params.data) {
let value = JSON.parse(decodeURIComponent(this.$route.params.data))
localStorage.setItem('EQ_LIST', JSON.stringify(value))
this.data = value
} else {
this.data = JSON.parse(localStorage.getItem('EQ_LIST'))
}
更多推荐
已为社区贡献60条内容
所有评论(0)