关于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生命周期的深入理解
Dec 03 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
简单谈谈python中的多进程
2016/11/06 Python
Python程序退出方式小结
2017/12/09 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
建筑项目策划书
2014/01/13 职场文书
农村党支部先进事迹
2014/01/14 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
禁毒宣传标语
2014/06/19 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang