本文实例讲述了vue跳转方式(打开新页面)及传参操作。分享给大家供大家参考,具体如下:
<强> 1。router-link跳转
//直接写上跳转的地址
& lt; router-link="/细节/一个“比;
& lt;跨类=" spanfour "祝辞链接跳转& lt;/span>
& lt;/router-link>//添加参数
& lt; router-link:="{路径:/细节/两个,查询:{id: 1、名称:‘vue}}”在
& lt;/router-link>//参数获取
id=route.query.id美元//新窗口打开
& lt; router-link:="{路径:/细节/三,查询:{id: 1、名称:‘vue}}”目标=捌降取北?
& lt;/router-link>
之前
<强> 2。美元。router.push跳转
toDeail (e) {
美元。路由器。推动({路径:“/细节”,查询:{id: e}})
}//参数获取
id=route.query.id美元
toDeail (e) {
美元。路由器。推动({name: "/细节”,参数:{id: e}})
}//注意地址需写在名字后面//参数获取,参数和查询区别,查询参数在地址栏显示,参数个数的参数不在地址栏显示
id=route.params.id美元
之前
<强> 3。美元。router.replace跳转
//和推动的区别,按有记录一个历史,取代没有
toDeail (e) {
美元。路由器。替换({name:/细节,参数:{id: e}})
}
之前
<强> 4。解决跳转
//解决页面跳转可用新页面打开//2.1.0版本后,使用路由对象的解决方法解析路由,可以得到的位置,路由器,href等目标路由的信息。得到href就可以使用window.open开新窗口了(这边应用:https://segmentfault.com/q/1010000009557100下的一个回答)
toDeail (e) {
const新=美元路由器。解决({name:/细节,参数:{id: e}})
window.open (new.href,“平等”)
}
之前
接收方怎么接收参数<代码>。美元route.query.serid 和<代码>。美元route.params.setid>
注意接收参数时是路线不美元是美元路由器
& lt; template>
& lt; div>
testDemo {{。$ route.query.setid}}
& lt;/div>
& lt;/template>
之前
接收的参数:
& lt; template>
& lt; div> userlist——{{mallCode}} & lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“UserList”,
日期:函数(){
返回{“mallCode”: mallCode}
},
创建(){
this.getParams ()
},
方法:{
getParams () {//取到路由带过来的参数
const routerParams=oute.query.mallCode美元;
这一点。mallCode=routerParams;
console.log(这一点。route.query美元);//将数据放在当前组件的数据内//this.mallInfo.searchMap。mallCode=routerParams;//this.keyupMallName ()
}
}
}
& lt;/script>
& lt; scoped>风格;
& lt;/style>
之前
希望本文所述对大家vue.js程序设计有所帮助。
