关于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防抖与节流
Nov 24 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
php文件包含的几种方式总结
2019/09/19 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python 全局变量的import机制介绍
2017/09/07 Python
python实现简单flappy bird
2018/12/24 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
一年级家长会邀请函
2014/01/25 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
Java 关于String字符串原理上的问题
2022/04/07 Java/Android