vue router-link下划线和颜色问题及解决

目录
  • router-link下划线和颜色问题
    • 解决方法
  • "router-link"各种属性解释
    • 1.":to" 属性
    • 2."replace" 属性
    • 3."tag" 属性
    • 4."active-class" 属性
    • 5."exact" 属性

router-link下划线和颜色问题

使用router-link链接的文字，默认为蓝色并带下划线，很不好看。

解决方法

在<style scoped></style>中添加样式：

<style scoped>
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: white;
}
</style>

a指文字不带下划线且为白色，router-link-active指点击后变为黄色。

效果如图

"router-link"各种属性解释

在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制

而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的

至于为什么要把a换成router-link原因还是有的，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），router-link可以渲染为任何元素，这里可以直接渲染成li标签，同样能实现跳转效果，节省了a标签的使用，还有一个原因可能是因为a标签正常是链接的跳转的作用，点击a时可能会重载页面，使用router-link，此标签会被vue所监听，跳转链接时就不会刷新页面了。当然这个人理解，不对之处有望指正。

"router-link"属性

1.":to" 属性

相当于a标签中的"herf"属性，后面跟跳转链接所用

<router-link :to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home" rel="external nofollow" >Home</a>

2."replace" 属性

replace在routre-link标签中添加后，页面切换时不会留下历史记录

<router-link :to="/home" replace></router-link>

3."tag" 属性

具有tag属性的router-link会被渲染成相应的标签

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>

此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面

4."active-class" 属性

这个属性是设置激活链接时class属性，也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class

可以在router.js里面设置

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})

5."exact" 属性

开启router-link的严格模式

<router-link :to="/" exact>home</router-link>

上面这个标签如果不加exact属性，则会在vue2.leenty.com/article页面下也会被匹配到，

这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com下

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue router-link 默认a标签去除下划线的实现

    我就废话不多说了,大家还是直接看例子吧~ .router-link-active{ text-decoration: none; } vue的router-link默认的a标签点击会有一个阴影 补充知识:vue-router更改router-link点击时样式 默认类:router-link-active:可以通过在样式表中重新定义 基类:linkActiveClass:在创建路由时进行全局配置,linkActiveClass:/配置自定义类/ 以上这篇vue router-link 默认a标签

  • 详解vue-router 2.0 常用基础知识点之router-link

    前端采用前后端分离的方式进行开发,我们使用vue2.0框架,做单页面应用难免会用到vue-router,今天把项目中的用到router-link摘出来,一是想整理一下这些用法,方便下次快速查找,二是重新再过一下vue-router,增加熟悉度.也希望下面这些例子能帮到其他使用vue-router的朋友. 1,$route.params 类型: Object 一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象. path: '/detail/:id'

  • 详解vue中router-link标签所必备了解的属性

    to 表示目标路由的链接. 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象. <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home" rel="external nofollow" >Home</a

  • vue-router-link选择样式设置方式

    目录 vue-router-link选择样式设置 第一种 第二种 hash和history的区别 1.hash 2.history(服务器环境下才有效果) vue-router的link样式设置 vue-router-link选择样式设置 第一种 在router-link组件上 添加属性 active-class=‘ative’ 在css中设置 .actve样式即可 第二种 在css中写样式 router-link-exact-active <template>   <div id=&q

  • Vue3如何使用Vue-Router进行路由控制

    目录 1.安装Vue-router 3.固定路由跳转 4.动态路由跳转 5. vue-router配置文件 6.在代码中控制路由跳转 1.安装Vue-router 传送门:官方文档 yarn add vue-router@4 --save 2.安装完成后还需要在main.js导入vue-router import { createApp } from 'vue' import App from './App.vue' import router from './router' import na

  • vue router-link下划线和颜色问题及解决

    vue router-link下划线和颜色问题及解决

    目录 router-link下划线和颜色问题 解决方法 "router-link"各种属性解释 1.":to" 属性 2."replace" 属性 3."tag" 属性 4."active-class" 属性 5."exact" 属性 router-link下划线和颜色问题 使用router-link链接的文字,默认为蓝色并带下划线,很不好看. 解决方法 在<style scope

  • Android如何自定义EditText光标与下划线颜色详解

    Android如何自定义EditText光标与下划线颜色详解

    前言 最近在写些小Demo复习基础,在用到EditText的时候突然发现之前几乎没有注意到它的光标和下划线的颜色,于是花了不少时间,看了不少博客,现在就来总结和分享一下收获,话不多说了,来一起看看详细的介绍: 1.第一印象:原生的EditText 我们要在原生的EditText上修改,首先当然要认识一下它的本来面目.在Android Studio中新建一个工程,让MainActivity继承于AppCompatActivity(为什么要这样做,后面再说),然后在MainActivity的布局中放

  • vue+element UI 文字加下划线长度多出一点点的问题

    目录 element UI 文字加下划线长度多出一点点 具体结构如下(el-table->el-table-column) 显示如下 vue动态添加下划线 给li设置样式 element UI 文字加下划线长度多出一点点 具体结构如下(el-table->el-table-column) 显示如下 经查,发现是代码写的不够严谨,导致后面出现了空隙(感觉不够一个空格),把代码写成这样就好了: 另外,如果用原生html加css来写,对代码格式没有这种要求,也就是两种写法都可以. vue动态添加下划

  • Android实现EditText添加下划线

    在安卓高版本,默认是有下划线的,其默认下划线的颜色是由其主题颜色来控制的! 控制如下: <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item>

  • springmvc中下载中文文件名称为下划线的解决方案

    目录 springmvc下载中文文件名称为下划线 这个问题很好解决 java生成文件名时汉字变为下划线? 注意这里两个编码 springmvc下载中文文件名称为下划线 springboot项目中,在下载文件的时候,通过封装ResponseEntity,将文件流写入body,这种下载文件的方式,造成了下载的文件名为正文显示为下划线的形式: 这个问题很好解决 直接将输入的文件名的编码格式定义成GBK格式: 如下代码 public static ResponseEntity<FileSystemRes

  • vue router下的html5 history在iis服务器上的设置方法

    vue router下的html5 history在iis服务器上的设置方法

    首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

  • Android更改EditText下划线颜色样式的方法

    Android更改EditText下划线颜色样式的方法

    前言 相信大家都知道,当使用AppCompatEditText(Edit Text)时,默认的下划线是跟随系统的#FF4081的颜色值的,通过改变这个值可以改变所有的颜色样式 有时候你想单独定义某一个界面的颜色样式,则可以这样做: 1.在你的build.gradle中添加最新的appcompat库 dependencies { compile 'com.android.support:appcompat-v7:X.X.X' // X.X.X 为最新的版本号 } 2.让你的activity继承an

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • vue router动态路由下让每个子路由都是独立组件的解决方案

    vue router动态路由下让每个子路由都是独立组件的解决方案

    vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r

  • Vue实现textarea固定输入行数与添加下划线样式的思路详解

    先上效果图### textarea下划线 设置一张1*35 //行高 的图片 , 设置背景图即可. background: url('./img/linebg.png') repeat; border: none;outline: none;overflow: hidden; line-height: 35px;//注意行高要和背景图高度一致resize: none; 固定输入行数 需求:用户固定不论多少字节,只能输入2行. 因为是限制行数,所以不能用maxlength设置. 实现思路 首先想到

随机推荐