目录Vue-router-link选择样式设置第一种第二种hash和history的区别1.hash2.history(服务器环境下才有效果)vue-router的link样式设置v
在router-link组件上 添加属性 active-class=‘ative’
在CSS中设置 .actve样式即可
在css中写样式 router-link-exact-active
<template>
<div id="app">
<div class="nav">
<router-link to='/home'>首页</router-link>
<router-link to='/about'>关于我们</router-link>
</div>
<transition :duration="{ enter: 500, leave: 500 }"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut">
<router-view/>
</transition>
</div>
</template>
<script>
import '@/util/animate.min.css'
// import Classstyle from '@/components/Classstyle'
export default{
data(){
return{
}
},
components:{
// Classstyle
}
}
</script>
<style lang="less">
*{
margin: 0;
padding: 0;
}
.nav{
text-align: center;
margin: 0 auto;
}
.nav a{
padding: 50px;
}
.nav a.router-link-exact-active{
background-color: orange;
color: #fff;
}
</style>
hash 虽然出现在 URL 中,但不会被包括在 Http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.npc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。
hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL。
hash 只可添加短字符串。
pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;;
pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;;
pushState() 可额外设置 title 属性供后续使用。
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”
发现router-link添加上去后文字上会出现下划线,打开调试工具发现router-link其实是由a来实现的,在reset的时候
a {
text-decoraction: none;
}
至于点击之后的样式则是router-link-active
.router-link-active {
text-decoration: none;
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue-router-link选择样式设置方式
本文链接: https://www.lsjlt.com/news/147788.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0