vue-router-link选择样式设置方式
vue-router-link选择样式设置
第一种
在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和history的区别
1.hash
hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.npc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。
hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL。
hash 只可添加短字符串。
2.history(服务器环境下才有效果)
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 依赖的页面。”
vue-router的link样式设置
发现router-link添加上去后文字上会出现下划线,打开调试工具发现router-link其实是由a来实现的,在reset的时候
a { text-decoraction: none; }
至于点击之后的样式则是router-link-active
.router-link-active { text-decoration: none; }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Element Plus在el-form-item中设置justify-content无效的解决方案
这篇文章主要介绍了Element Plus在el-form-item中设置justify-content无效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10vue2结合element-ui的gantt图实现可拖拽甘特图
因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,下面这篇文章主要给大家介绍了关于vue2结合element-ui的gantt图实现可拖拽甘特图的相关资料,需要的朋友可以参考下2022-11-11关于Element-ui中el-table出现的表格错位问题解决
使用ElementUI的el-table后,偶然发现出现行列错位、对不齐问题,下面这篇文章主要给大家介绍了关于Element-ui中el-table出现的表格错位问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07Vue+element 解决浏览器自动填充记住的账号密码问题
我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中,如何实现此功能呢,下面小编给大家介绍下,感兴趣的朋友一起看看吧2019-06-06
最新评论