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标签去除下划线的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-router的导航钩子(导航守卫)

    在做vue项目的时候,要求用户在页面访问前先登录,或在离开页面前发出提醒.vue官方提供的路由管理器 vue-router 提供的导航钩子,通过跳转或取消的方式守卫导航.以下总结了路由钩子函数的使用方法和一些使用场景. 一.全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中: to:将要访问的路径 fr

  • Nuxt.js的路由跳转操作(页面跳转nuxt-link)

    路由跳转代码如下: <ul> <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li> <li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li> <li><nuxt-link :to="

  • Nuxt.js nuxt-link与router-link的区别说明

    前言 在使用Nuxt.js时可能会遇到一个这样的问题? 当打开请求页面的时候,所有页面都被请求了. 这正是<router-link>组件所有的特性. 首先说一下router-link router-link <router-link>是使vue项目具有路由功能的应用点击组件. nuxt-link 先看一下官方api介绍<nuxt-link> 正如官方所说<nuxt-link>使用方式和用途<router-link>是一致的. 但,后面说将来我们会

  • vue-router跳转时打开新页面的两种方法

    最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持

  • 在nuxt中使用路由重定向的实例

    我们都知道,在写SPA的时候,我们可以通过配置vue-router来实现路由的重定向. 官方文档(以及ts类型)的定义中给出了这一选项: interface RouteConfig = { path: string, redirect?: string | Location | Function, } 也就是说,我们可以定义这样一个路由: { path: "/foo", redirect: "/foo/bar", } 这样,我们在访问/foo的时候,就会被重定向到/

  • 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嵌套路由在history模式下刷新无法渲染页面问题的解决方法

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

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

  • Android使用TextView实现无下划线超链接的方法

    本文实例讲述了Android使用TextView实现无下划线超链接的方法.分享给大家供大家参考,具体如下: Android系统默认把网址.电话.地图(geo地址).邮箱等转换为超链接. 具体请查看 android:TextView简单设置文本样式和超链接的方法 和HTML中的一样,默认超链接都带下划线的,下面的方案可以在TextView中去掉超链接的下划线: 1.重写ClickableSpan类来去掉下划线样式(系统默认使用ClickableSpan来封装超链接) //无下划线超链接,使用tex

  • 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 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 页面,

  • Vue Router去掉url中默认的锚点#

    Vue Router去掉url中默认的锚点#

    hash模式url vue-router默认hash模式--使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载. 如果不想要这种默认的hash模式,可以用路由的history模式,这种模式充分的利用history.pushState API来完成URL跳转而无需重新加载页面. index.js Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path:"/xxx&quo

  • vue router 源码概览案例分析

    源码这个东西对于实际的工作其实没有立竿见影的效果,不会像那些针对性极强的文章一样看了之后就立马可以运用到实际项目中,产生什么样的效果,源码的作用是一个潜移默化的过程,它的理念.设计模式.代码结构等看了之后可能不会立即知识变现(或者说变现很少),而是在日后的工作过程中悄无声息地发挥出来,你甚至都感觉不到这个过程 另外,优秀的源码案例,例如 vue . react 这种,内容量比较庞大,根本不是三篇五篇十篇八篇文章就能说完的,而且写起来也很难写得清楚,也挺浪费时间的,而如果只是分析其中一个点,例如

  • vue router的基本使用和配置教程

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 1.在main.js文件中引入相关模块

  • 浅谈Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

  • 如何在Vue 3中扩展Vue Router链接详解

    如何在Vue 3中扩展Vue Router链接详解

    前言 <router-link> 标签是一个很好的工具,可以在你的Vue应用程序的不同页面之间进行导航,但当导航到一个外部链接时,它不是一个工具,为此,你应该使用一个普通的<a> 标签.也许这只是我的问题,但很多时候,我都懒得去理会这其中的差别.其他时候,链接可能是动态的,也就是说,来自数据库或一些用户提供的数据源.在这种情况下,你根本不知道这个链接是外部的还是内部的,而且在每个可能使用这个链接的地方手动做V-if是多么痛苦的事情. 如果只是用一个单一的组件来处理所有的内部和外部链

随机推荐