无法从 Vue 路由器中删除下划线-link
Cannot Remove Underline From Vue router-link
我想我几乎尝试了所有尝试从 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>
赋值class
<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>
分配单独的标签 + 为该标签声明class
<router-link :to="{name: 'Plan'}">
<div class="sub-link">COVID-19</div>
</router-link>
这些只是几个列表,我确实尝试了我能想到的所有可能的方法...我是否缺少有关自定义 Vue 的内容router-link
?
当您检查 DOM 中的 router-link 时,您会发现它是一个 a
标签。请记住,即使删除了初始下划线,当您将鼠标悬停在路由器 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>
.expander a {
text-decoration: none;
}
.expander a:hover {
text-decoration: none;
}
外部 router-link
正在将 text-decoration: underline
应用于其 inner-text,内部 router-link
也将 text-decoration: underline
应用于其 inner-text .
此刻你的内在 router-links
基本上应用了双下划线。
您需要将其从两者中删除。如果您需要另一个元素具有 text-decoration: underline
,则单独为该元素设置它。
使用display: inline-block;text-decoration:none;
,诀窍是显示:inline-block;.
Css spec 州
For block containers that establish an inline formatting context, the
decorations are propagated to an anonymous inline element that wraps
all the in-flow inline-level children of the block container. For all
other elements it is propagated to any in-flow children. Note that
text decorations are not propagated to floating and absolutely
positioned descendants, nor to the contents of atomic inline-level
descendants such as inline blocks and inline tables.
示例:代码中的 link 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>
下面是一个演示:
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/vue-router@3.0.1/dist/vue-router.js"></script>
<section id="app">
<app></app>
</section>
我想我几乎尝试了所有尝试从 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>
赋值class
<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>
分配单独的标签 + 为该标签声明class
<router-link :to="{name: 'Plan'}">
<div class="sub-link">COVID-19</div>
</router-link>
这些只是几个列表,我确实尝试了我能想到的所有可能的方法...我是否缺少有关自定义 Vue 的内容router-link
?
当您检查 DOM 中的 router-link 时,您会发现它是一个 a
标签。请记住,即使删除了初始下划线,当您将鼠标悬停在路由器 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>
.expander a {
text-decoration: none;
}
.expander a:hover {
text-decoration: none;
}
外部 router-link
正在将 text-decoration: underline
应用于其 inner-text,内部 router-link
也将 text-decoration: underline
应用于其 inner-text .
此刻你的内在 router-links
基本上应用了双下划线。
您需要将其从两者中删除。如果您需要另一个元素具有 text-decoration: underline
,则单独为该元素设置它。
使用display: inline-block;text-decoration:none;
,诀窍是显示:inline-block;.
Css spec 州
For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
示例:代码中的 link 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>
下面是一个演示:
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/vue-router@3.0.1/dist/vue-router.js"></script>
<section id="app">
<app></app>
</section>