zoukankan      html  css  js  c++  java
  • 395 vue的 router-link-exact-active,router-link-active,入口导航菜单高亮处理案例

    • 点击导航 => 元素里添加了两个类
    <a href="#/one" class="router-link-exact-active router-link-active">One</a>
    <a href="#/two" class="">Two</a>
    
    • 修改方式1 : 直接修改类的样式
    .router-link-exact-active,
    .router-link-active {
      color: red;
      font-size: 50px;
    }
    
    • 修改方式2 : 使用存在过的类样式 => 修改默认高亮类名
    const router = new VueRouter({
      routes: [],
      // 修改默认高亮的a标签的类名
      // red 是已经存在过的
      linkActiveClass: 'red'
    })
    

    03-高亮状态.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    
        <style>
            /* 假如说路由是后面加进来的, 但是如果之前就已经有了一个类 */
            
            .red {
                color: red;
                font-size: 50px;
            }
            /* 
            .router-link-exact-active,
            .router-link-active {
                color: red;
                font-size: 50px;
            } 
            */
        </style>
    </head>
    
    <body>
        <div id="app">
            <!-- 1. 入口 -->
            <router-link to="/one">one</router-link>
            <router-link to="/two">two</router-link>
    
            <!-- 4. 出口 -->
            <router-view></router-view>
        </div>
        <script src="./vue.js"></script>
        <script src="./node_modules/vue-router/dist/vue-router.js"></script>
        <script>
            // 3. 组件
            const One = {
                template: `<div>one组件</div>`
            }
            const Two = {
                template: `<div>two组件</div>`
            }
    
            //  实例化
            const router = new VueRouter({
                // 2. 规则
                routes: [{
                    path: '/one',
                    component: One
                }, {
                    path: '/two',
                    component: Two
                }],
                // router-link-exact-active 【去掉router-,改为小驼峰,最后加上Class。】
                linkExactActiveClass: 'red'
            })
    
            const vm = new Vue({
                router,
                el: '#app',
                data: {}
            })
        </script>
    </body>
    
    </html>
    

    04-高亮状态-精确匹配和模糊匹配.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    
        <style>
            /* 假如说路由是后面加进来的 ,但是如果之前就已经有了一个类 */
            /* .red {
                color: red;
                font-size: 50px;
            } */
            
            .router-link-exact-active,
            .router-link-active {
                color: red;
                font-size: 50px;
            }
        </style>
    </head>
    
    <body>
        <!-- 
           1. 精确匹配  和 模糊匹配  (了解)
           2. router-link-exact-active: 精确匹配   当url上的路径 == href的值 
           3. router-link-active      : 模糊匹配   当url上的路径 (包含)>=  href的值
         -->
    
        <div id="app">
            <!-- 1. 入口 -->
            <!-- exact:加上表示只允许精确匹配,不允许模糊匹配 -->
            <router-link to="/" exact>one</router-link>
            <router-link to="/two">two</router-link>
    
            <!-- 4. 出口 -->
            <router-view></router-view>
        </div>
    
        <script src="./vue.js"></script>
        <script src="./node_modules/vue-router/dist/vue-router.js"></script>
        <script>
            // 3. 组件
            const One = {
                template: `<div>one组件</div>`
            }
            const Two = {
                template: `<div>two组件</div>`
            }
    
            //  实例化
            const router = new VueRouter({
                // 2. 规则
                routes: [{
                        path: '/',
                        component: One
                    }, {
                        path: '/two',
                        component: Two
                    }]
                    // router-link-exact-active
                    // linkExactActiveClass: 'red'
            })
    
            const vm = new Vue({
                router,
                el: '#app',
                data: {}
            })
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    poj1661【DP,左右两端dp】
    hdoj1074【A的无比爆炸】
    hdoj1024【DP.最 大 m 字 段 和】(写完我都怕。。。不忍直视。。)
    qq教xixi写模拟加法【非常爆炸】
    错排公式
    POJ3616【基础DP】
    hdoj1257【疑问】(贪心)
    【弱的C艹之路。。未完待续】
    hdoj1728【搜索的两种写法】
    hdoj1001【智障了。。。】
  • 原文地址:https://www.cnblogs.com/jianjie/p/12539472.html
Copyright © 2011-2022 走看看