这篇文章给大家介绍了“vue-router-link选择样式设置的操作有什么”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

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;
}

以上就是关于“vue-router-link选择样式设置的操作有什么”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 浅谈JS种哪些少见的运算符和操作符

  对于JS的运算符和操作符大家应该都比较熟悉，例如+、-、++、=、！等等这些都是比较常见的，但是JavaScript运算符和操作符有很多，有很比较少见的运算符和操作符，很多人可能都了解，因此这篇文章就给大家介绍一下这一下比较少见的运算符和操作符，感兴趣的朋友可以了解看看。

• JS中的数据代理与事件怎么理解，作用与应用是怎样

  所谓数据代理（也叫数据劫持），指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象

• JS中this关键字怎样理解？ this到底是谁？

  我们在学习JavaScript的时候，this关键字的知识是需要掌握的，很多新手在学习的时候，对于this关键字不是很理解，因此这篇文章就给大家深入介绍JavaScript的this关键字。

• Vue中的v-model基本用法是什么？v-model的修饰符有什么用？

  这篇文章给大家介绍的是关于Vue中的v-model的内容，下文有v-model的基本用法、v-model的修饰符等v-model相关的内容，感兴趣的朋友可以参考，那么接下来就跟随小编来学习一下吧。

• ejsExcel模块使用来做什么，具体用法是怎样

  ejsExcelgithub地址: ejsExcel使用：npminsatllejsexcel//安装ejsexcel模块npmuninstallejsexcel//卸载ejsexcel模块模板：模板讲解：模板接收的数据格式为：[[{"tble_name":"table","date":"date"}],[{"cb1":"cb1"}]];