Vueルーターリンクからアンダースコアを削除できません

Question

からアンダースコアを削除しようとして、ほとんどすべてを試したと思いますrouter-link。

これは私のコードです：

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

サブリンクからのみアンダースコアを削除しようとしています。

私が試したこと：

インラインスタイル

<router-link style="text-decoration: none !important;" :to="{name: 'Plan'}">COVID-19</router-link>

クラスを割り当てる

<router-link class="sub-link" :to="{name: 'Plan'}">COVID-19</router-link>

<style scoped>
   .sub-link{text-decoration: none !important;}
</style>

タグを宣言する

<router-link tag="div" :to="{name: 'Plan'}">COVID-19</router-link>

<style scoped>
   div{text-decoration: none !important;}
</style>

割り当ての別々のタグ+そのタグの宣言クラス

<router-link :to="{name: 'Plan'}">
   <div class="sub-link">COVID-19</div>
</router-link>

これらはほんの数リストです、私は文字通り私が考えることができるすべての可能な方法を試しました...私はVueをカスタマイズすることについて何かが欠けていrouter-linkますか？

Answer 1

を使用してdisplay: inline-block;text-decoration:none;、トリックはdisplay：inline-block; 。

Css仕様の状態

インラインフォーマットコンテキストを確立するブロックコンテナの場合、装飾は、ブロックコンテナのすべてのインフローインラインレベルの子をラップする匿名のインライン要素に伝播されます。他のすべての要素については、流入するすべての子に伝播されます。テキスト装飾は、フローティングおよび絶対位置の子孫にも、インラインブロックやインラインテーブルなどのアトミックインラインレベルの子孫のコンテンツにも伝播されないことに注意してください。

例：COVID-19コード内のリンクは下線を削除します。

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}" style="display: inline-block;text-decoration:none;">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

以下は1つのデモです。

let Layout = {
  template: `<div>
  <h4>Layout Page </h4>
  <router-link to="/contact">
  <div>
    <p>Links<p>
    <router-link to="/contact/add" style="display: inline-block;text-decoration:none;">Add1</router-link>
    <router-link to="/addcontact">Add2</router-link>
  </div>
  </router-link>
  <router-view></router-view>
  </div>`
};
let Home = {
  template: '<div>this is the home page. Go to <router-link to="/contact">contact</router-link> </div>'
};

let ContactList = {
  // add <router-view> in order to load children route of path='/contact'
  template: '<div>this is contact list, click <router-link to="/contact/add">Add Contact In sub Router-View</router-link> here to add contact<p><router-view></router-view></p> Or Click <router-link to="/addcontact">Add Contact In Current Router-View</router-link></div>'
};

let ContactAdd = {
  template: '<div>Contact Add</div>'
}

let router = new VueRouter({
  routes: [{
    path: '/',
    redirect: 'home',
    component: Layout,
    children: [{
        path: 'home',
        component: Home
      },
      {
        path: 'contact',
        component: ContactList,
        children: [{
          path: 'add',
          component: ContactAdd
        }]
      },
      {
        path: 'addcontact', // or move ContactAdd as direct child route of path=`/`
        component: ContactAdd,
      }
    ]
  }]
});

new Vue({
  el: '#app',
  components: {
    'App': {
      template: '<div><router-view></router-view></div>'
    },
  },
  router
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>

Answer 2

アウターrouter-linkはtext-decoration: underlineそのインナーテキストに適用され、インナーはそのインナーテキストにrouter-linkも適用さtext-decoration: underlineれます。

現在、基本的に内側に二重下線が適用されていますrouter-links。

両方から削除する必要があります。別の要素が必要な場合はtext-decoration: underline、その要素に個別に設定します。