关于vue-router-link选择样式设置


Posted in Vue.js onApril 30, 2022

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;
}

Tags in this post...

Vue.js 相关文章推荐
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 #Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 #Vue.js
Vue操作Storage本地化存储
Apr 29 #Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 #Vue.js
详解Vue3使用axios的配置教程
Apr 29 #Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 #Vue.js
vue里使用create, mounted调用方法
You might like
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP实现懒加载的方法
2015/03/07 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
angular组件间通讯的实现方法示例
2020/05/07 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
后勤自我鉴定
2013/10/13 职场文书
计算机网络专业求职信
2014/06/05 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python