关于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+iview实现文件上传
Nov 17 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue如何清除浏览器历史栈
May 25 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 session会话的安全性分析
2011/09/08 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
Python实现的生成格雷码功能示例
2018/01/24 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python 格式化输出百分号的方法
2019/01/20 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
旷课检讨书2000字
2014/01/14 职场文书
民间借贷协议书范本
2014/10/01 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
年会邀请函范文
2015/01/30 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang