欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面

 更新時間：2023年12月04日 14:58:06   作者：『減減』  
這篇文章主要介紹了vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue-router(this.$router)在新窗口打開路由跳轉(zhuǎn)頁面

使用標(biāo)簽實現(xiàn)新窗口打開

在頁面導(dǎo)航中被渲染為標(biāo)簽, 在vue2版本的支持 target=“_blank”

代碼如下：

<router-link target="_blank" :to="{path:'/note'}">新窗口打開</router-link>

編程式導(dǎo)航

有些時候需要在單頁面中實現(xiàn)頁面跳轉(zhuǎn)，那么可以借助router的示例方法，通過編寫代碼實現(xiàn)。

我們常用的是$router.push 和$ router.go 但是vue2.0以后，這種方式就不支持新窗口打開的屬性了，這個時候就需要使用this.$router.resolve, 傳參時可以使用query，也可以使用params

代碼如下：

    const routeUrl = this.$router.resolve({
      path: '/路徑',
      query: { id }
    })
    window.open(routeUrl.href, '_blank')

vue報錯之this.$router is undefine

最近寫項目遇到這個報錯，特此記錄一下

 axios.get('/person/ticket')
 .then(response => {
    
       this.$router.push('/ground')
           
 })

原因很簡單，因為我使用的是箭頭函數(shù)，改變了this指向，所以vue在這里找不到$router，從而報錯

解決很簡單

保留this即可

 const that = this;
 axios.get('/person/ticket')
 .then(response => {
    
       that.$router.push('/ground')
           
 })

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論