vue如何實現路由跳轉到外部鏈接界面

更新時間：2022年10月12日 10:45:14 作者：molihuakai_118

這篇文章主要介紹了vue如何實現路由跳轉到外部鏈接界面，具有很好的參考價值，希望對大家有所幫助。

vue路由跳轉到外部鏈接界面

項目中用前端的是vue框架，有一個需求是，當點擊一個按鈕后，跳轉到原來已經發(fā)布過的ionic界面上。

如果是vue頁面中的內部跳轉，可以用this.$router.push()實現，但是如果我們還用這種方法跳到外部鏈接，就會報錯，因為外部頁面中是有HTTP等前綴的，那么我們如何跳轉到外部鏈接呢，我們只需用 window.location.href = ‘url’來實現

具體代碼如下：

//在data中定義好需要用到的路由數據
url:"http://www.baidu.com"

觸發(fā)一個點擊事件，其中item.url是傳給執(zhí)行方法的url鏈接，下面是事件執(zhí)行的函數。

<span @click="See(item.url)">

方法執(zhí)行：

See (e) {
? ? ? ? window.location.href = e
? ? ? }
? ? }

vue路由跳轉說明

vue中路由跳轉有很多使用 router-link to的，這是最常用的方法（單頁面跳轉），例子：

（to指向的就是路由路徑）

  <el-menu class="theselect" :default-active="activeIndex" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"><router-link to="/">首頁</router-link></el-menu-item>
            <el-menu-item index="2"><router-link to="/news" tag="span">最新資訊</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to="/3" tag="span">個性閱讀</router-link></el-menu-item>
            <el-menu-item index="4"><router-link to="/4" tag="span">智慧生活</router-link></el-menu-item>
            <el-menu-item index="5"><router-link to="/5" tag="span">校內互動</router-link></el-menu-item>
  </el-menu>

像element的官網中舉的例子，也有用href跳轉到的（跳轉到外部鏈接）

實際上他們算是同一個東西，router-link to本質上也是一個a標簽。

但這么使用會出現一個問題：

因為這個鏈接只包含了文字，所以此時只有點擊上文字才可以跳轉，但是事實上element的這個導航模塊，包括他的active樣式，都應該是只要點擊這個區(qū)域就可以選中跳轉，而不是必須點到文字上。

這時候就出現了一個很細微的操作差，如果是直接跳轉到其他界面的多界面顯示也還好，反正也看不出來，但是vue有很多都是單界面顯示，并且出于vue組件的復用性，有很大可能性是一個頂部導航欄會復用在好幾個主界面。

需求解決的問題：

跳轉區(qū)域不應該只包含文字，而應該是這個小選項一整塊。

但是這時候不能簡單的把router link to拿出去把這一塊包含，

像這樣：（錯誤示范）

  <el-menu class="theselect" :default-active="activeIndex" mode="horizontal" @select="handleSelect">
            <router-link to="/"><el-menu-item index="1">首頁</el-menu-item></router-link>
  </el-menu>

因為router link to它是一個a標簽啊，拿去包一個li小模塊（也可以理解為div，反正就是這一小塊）就不適合了，它可能會影響部分布局樣式，怪麻煩的。

正確解決方法：

 <el-menu class="theselect" :default-active="activeIndex" router mode="horizontal" @select="handleSelect">
                <el-menu-item index="/">首頁</el-menu-item>
                <el-menu-item index="/news">最新資訊</el-menu-item>
                <el-menu-item index="/3">個性閱讀</el-menu-item>
                <el-menu-item index="/4">智慧生活</el-menu-item>
                <el-menu-item index="/5">校內互動</el-menu-item>
</el-menu>

加了一個router。

這時候index=’/'指向的就是路由路徑，點擊這個模塊就可以直接跳轉