vue-router-link选择样式怎么设置

蜗牛 互联网技术资讯 2022-05-05 29 0

本篇内容主要讲解“vue-router-link选择样式怎么设置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持&hellip;&hellip;所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 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选择样式怎么设置”有了更深的了解,不妨来实际操作一番吧!这里是蜗牛博客网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

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

    评论