快捷導(dǎo)航

vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面

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

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

vue路由跳轉(zhuǎn)到外部鏈接界面

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

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

具體代碼如下：

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

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

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

方法執(zhí)行：

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

vue路由跳轉(zhuǎn)說明

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

（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">校內(nèi)互動</router-link></el-menu-item>
  </el-menu>

像element的官網(wǎng)中舉的例子，也有用href跳轉(zhuǎn)到的（跳轉(zhuǎn)到外部鏈接）

實(shí)際上他們算是同一個東西，router-link to本質(zhì)上也是一個a標(biāo)簽。

但這么使用會出現(xiàn)一個問題：

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

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

需求解決的問題：

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

但是這時候不能簡單的把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標(biāo)簽啊，拿去包一個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">校內(nèi)互動</el-menu-item>
</el-menu>

加了一個router。

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