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

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

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

具體代碼如下：

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

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

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

方法執(zhí)行：

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

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

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

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

  <el-menu class="theselect" :default-active="activeIndex" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"><router-link to="/">首頁(yè)</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">個(gè)性閱讀</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)互動(dòng)</router-link></el-menu-item>
  </el-menu>

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

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

但這么使用會(huì)出現(xiàn)一個(gè)問(wèn)題：

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

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

需求解決的問(wèn)題：

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

但是這時(shí)候不能簡(jiǎn)單的把router link to拿出去把這一塊包含，

像這樣：（錯(cuò)誤示范）

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

因?yàn)閞outer link to它是一個(gè)a標(biāo)簽啊，拿去包一個(gè)li小模塊（也可以理解為div，反正就是這一小塊）就不適合了，它可能會(huì)影響部分布局樣式，怪麻煩的。

正確解決方法：

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

加了一個(gè)router。

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

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

最新評(píng)論