这篇文章给大家介绍了“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue中v-for的使用时是否有key有何不同

  这篇文章主要为大家介绍了v-for中的:key，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• jQuery实现替换a标签内容的方法和代码是什么

  jquery替换a标签中间内容的方法：1、利用“$(a标签元素)”语句获取指定的a标签元素对象；2、利用html()方法来替换a标签中间的内容，语法为“a标签元素对象.html(要替换的内容);”。

• JS字符串操作方法有哪些？教你四个小技巧

  这篇文章给大家分享的是有关JS字符串操作方法的内容，有一些比较实用的小技巧，例如拆分字符串、 JSON格式化和解析、多行字符串和嵌入式表达式和验证字符串数组中是否存在子字符串这些，下文有实现代码，感兴趣的朋友可以了解一下。

• jQuery怎样操作table增加和删除行?

  今天给大家分享的是jquery操作table的内容，本文主要给大家介绍实现动态增加和删除行的功能，实现效果及代码如下，感兴趣的朋友接下来跟随小编一起看看吧。

• PureComponent里是如何对比props?一文带你了解浅对比

  这篇文章给大家分享的是PureComponent里是如何对比props的内容，文中示例代码介绍的非常详细，对大家学习和理解浅对比有一定的帮助，感兴趣的朋友接下来一起跟随小编看看吧。