這篇文章主要介紹vue.js中打開新頁面的方法,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!

vue.js中打開新頁面的方法:1、【router-link】跳轉(zhuǎn),代碼為【<router-link to="/detail/one">
】;2、通過【this.$router.push】跳轉(zhuǎn)。
vue.js中打開新頁面的方法:
1.router-link跳轉(zhuǎn)
// 直接寫上跳轉(zhuǎn)的地址
<router-link to="/detail/one">
<span class="spanfour" >link跳轉(zhuǎn)</span>
</router-link>
// 添加參數(shù)
<router-link :to="{path:'/detail/two', query:{id:1,name:'vue'}}">
</router-link>
// 參數(shù)獲取
id = this.$route.query.id
// 新窗口打開
<router-link :to="{path:'/detail/three', query:{id:1,name:'vue'}}" target="_blank">
</router-link>
```javascript2.this.$router.push跳轉(zhuǎn)
```javascript
toDeail (e) {
this.$router.push({path: "/detail", query: {id: e}})
}
// 參數(shù)獲取
id = this.$route.query.id
toDeail (e) {
this.$router.push({name: "/detail", params: {id: e}})
}
// 注意地址需寫在 name后面
//參數(shù)獲取,params和query區(qū)別,query參數(shù)在地址欄顯示,params的參數(shù)不在地址欄顯示
id = this.$route.params.id3.this.$router.replace跳轉(zhuǎn)
//和push的區(qū)別,push有記錄一個history,replace沒有
toDeail (e) {
this.$router.replace({name: '/detail', params: {id: e}})
}4. resolve跳轉(zhuǎn)
resolve頁面跳轉(zhuǎn)可用新頁面打開
2.1.0版本后,使用路由對象的resolve方法解析路由,可以得到location、router、href等目標(biāo)路由的信息。得到href就可以使用window.open開新窗口了(這邊應(yīng)用:https://segmentfault.com/q/1010000009557100下的一個回答)
toDeail (e) {
const new = this.$router.resolve({name: '/detail', params: {id: e}})
window.open(new.href,'_blank')
}以上是“vue.js中打開新頁面的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前文章:vue.js中打開新頁面的方法-創(chuàng)新互聯(lián)
網(wǎng)頁路徑:http://www.chinadenli.net/article34/ipsse.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、服務(wù)器托管、品牌網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容