3 回答

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個贊
更好、更干凈的方法:
<router-link v-if="type === 'internal' :to="link">
<slot />
</router-link>
<a v-else :ref="link"> <slot /> </a>
您可以v-if在根元素中使用,這樣它就可以解決您的問題
或者您可能只是錯過了路徑部分?
<component
:is="type === 'internal' ? 'router-link' : 'a'"
:to="type === 'internal' ? { path: link } : null"
:href="type !== 'internal' ? link : null"
>
<slot />
</component>

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個贊
官方文檔包含現(xiàn)在如何執(zhí)行此操作的示例。
擴(kuò)展 RouterLink
他們的方法是創(chuàng)建一個處理外部鏈接的自定義模板。

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個贊
...不同之處在于
<router-link>
版本將為鏈接提供 SPA 功能(即不加載新頁面,它動態(tài)呈現(xiàn)組件)。
通過不加載新頁面,我想您的意思是它不會重新加載頁面。是的,事實(shí)并非如此,因?yàn)?code>onclick處理程序?qū)嶋H上被分配給一個函數(shù),該函數(shù)在將新條目推入歷史堆棧時執(zhí)行preventDefault
(防止頁面重定向)。
如果您查看API 參考<router-link>
,您會發(fā)現(xiàn)最引人注目的事情是它active-class
根據(jù)活動/當(dāng)前路線在 es 之間切換。
因此,話雖這么說,您可以通過 ; 在默認(rèn)插槽內(nèi)進(jìn)行動態(tài)nchor<a>
渲染。因?yàn)榇藭r,slot 屬性將是一個已解析的 URL,然后您可以將其安全地綁定到 DOM屬性。v-slot
href
href
編輯
添加了一個示例(未經(jīng)測試)。
<router-link
? :to="link"
? v-slot="{ href, route, navigate, isActive, isExactActive }">
? <a
? ? :class="isActive ? 'your-custom-class' : 'anything'"
? ? :href="type !== 'internal' ? href : 'javascript:void(0);'"
? ? @click="customNavigate(navigate.bind($event))">
? ? <slot></slot>
? </a>
</router-link>
處理程序customNavigate可能類似于:
{
? methods: {
? ? customNavigate(navigate) {
? ? ? if (this.type === 'internal') {
? ? ? ? navigate();
? ? ? ? return false;
? ? ? }
? ? }
? }
}
您基本上可以根據(jù)插槽屬性在組件內(nèi)錨標(biāo)記上添加任何屬性,例如以某些方式導(dǎo)航,添加特殊類,具體取決于您的用例。
- 3 回答
- 0 關(guān)注
- 179 瀏覽
添加回答
舉報