这篇文章给大家介绍了“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多维数组变一维有哪些方法？其实多维数组转一维数组的方法有很多，下文给大家分享了一些方法和实例，有需要的朋友可以参考，另外下文还简单介绍了数组去重和排序，感兴趣的朋友就接着往下看吧。

• Node.js中的Buffer怎么创建，写法是怎样的

  本篇文章带大家深入了解下Node.js中的 Buffer（缓冲区），介绍一下创建 Buffer 类的多种方式、写入缓冲区的方法等，希望对大家有所帮助！

• 如何设置setStorage和获取getStorage所有值

  目录前言设计设置 setStorage获取 getStorage获取所有值删除 removeStorage清空 clearStorage加密、解密使用完整代码前言很多人在用 localStorage 或 sessionStorage 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简

• JavaScript去重有多少方式，代码是什么

  去重方法：1、使用toString()和split()方法将数字转为字符数组；2、使用“[...new Set(arr)]”或“Array.from(new Set(arr))”语句来去处重复字符；3、将去重后的数组转为数字即可。

• Angular创建独立组件的操作及用法是什么

  本篇文章带大家了解一下Angular中的独立组件，看看怎么在Angular中创建一个独立组件，怎么在独立组件中导入已有的模块，希望对大家有所帮助！