第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Vue 中根據(jù)鏈接是外部還是內(nèi)部動態(tài)渲染 <router-link> 或 <a>?

如何在 Vue 中根據(jù)鏈接是外部還是內(nèi)部動態(tài)渲染 <router-link> 或 <a>?

慕工程0101907 2023-10-24 17:16:55
<template>  <component    :is="type === 'internal' ? 'router-link' : 'a'"    :to="type === 'internal' ? link : null"    :href="type !== 'internal' ? link : null"  >    <slot />  </component></template><script>import { Component, Prop, Vue } from "vue-property-decorator";@Componentexport default class SiteLink extends Vue {  @Prop({    validator: (value: string) =>      ["external", "internal"].includes(value)  })  private readonly type!: string;  @Prop({ type: String })  private readonly link!: string;}</script>上面是一個 Vue 組件,它將在其中呈現(xiàn)一個鏈接。我已經(jīng)刪除了與問題無關(guān)的任何內(nèi)容(即rel、target、class等)。理解- 我對 Vue Router 的理解是,<router-link to="/about">About</router-link>和<a href="/about">About</a>都會像<a href="/about">About</a>在 DOM 中一樣渲染,不同之處在于<router-link>版本將為鏈接提供 SPA 功能(即不加載新頁面,它動態(tài)渲染組件)。預(yù)期- 當(dāng) 時type="internal",它將呈現(xiàn)該<router-link>版本。當(dāng) 時type="external",它將渲染<a>版本。<site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link>Will render<a href="https://stackoverflow.com">Stack Overflow</a><site-link type="internal" link="/about">About</site-link>Will render<router-link to="/about">About</router-link>Which is then handle by VueRouter to render<a href="/about">About</a>實(shí)際- 當(dāng) 時type="internal", a<a>沒有在 DOM 中渲染。 href當(dāng) 時type="external",它會按預(yù)期呈現(xiàn)。<site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link>Will render<a href="https://stackoverflow.com">Stack Overflow</a><site-link type="internal" link="/about">About</site-link>Will render<router-link to="/about">About</router-link>Which is then handle by VueRouter to render<a>About</a> <!-- Notice there is no href -->有什么想法可以實(shí)現(xiàn)我想要的嗎?
查看完整描述

3 回答

?
絕地?zé)o雙

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>


查看完整回答
反對 回復(fù) 2023-10-24
?
慕婉清6462132

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個贊

官方文檔包含現(xiàn)在如何執(zhí)行此操作的示例。

  • 擴(kuò)展 RouterLink

他們的方法是創(chuàng)建一個處理外部鏈接的自定義模板。


查看完整回答
反對 回復(fù) 2023-10-24
?
陪伴而非守候

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-slothrefhref


編輯

添加了一個示例(未經(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)航,添加特殊類,具體取決于您的用例。


查看完整回答
反對 回復(fù) 2023-10-24
  • 3 回答
  • 0 關(guān)注
  • 179 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號