zoukankan      html  css  js  c++  java
  • vuerouter-7._路由高亮

    1.router-link-exact-active 精准匹配

    2.router-link-active 匹配

    配置:------------------------------------------------------------------------------------------------------

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    //@表示寻找根目录
    import HelloWorld from '@/components/HelloWorld'
    import learn from '@/components/learn'
    import Basee from '@/components/basee'
    import Http from '@/components/http'
    import NotFound from '@/components/404'
    Vue.use(VueRouter)
    //创建路由
    export default new VueRouter({
    //mode:'history',
    linkActiveClass:"active",
    linkExactActiveClass:"currentactive",
    routes: [{
    path: "/h/:id",
    name: "HelloWorld", //可以作为跳转使用
    component: HelloWorld
    },
    {
    path: "/learn/:id",
    name: "learn",
    component: learn,
    children: [{
    path: "basee",
    component: Basee
    },
    {
    path: "http",
    component: Http
    }
    ]
    },
    {
    path:"/",
    //重定向
    redirect:"/learn"
    },
    {
    path:"*",
    //404
    component:NotFound
    }
    ]
    })

    2.样式-----------------------------------

    <template>
    <div id="app">
    <img src="./assets/logo.png">
    <ul>
    <!-- <router-link to="/h" tag="li">HelloWorld</router-link>
    <router-link to="/learn" tag="li">learn</router-link> -->
    <router-link :to="{name:'HelloWorld',params:{id:helloparams}}" tag="li">HelloWorld</router-link>
    <router-link :to="{name:'learn'}" tag="li">learn</router-link>
    </ul>
    <button class="btn" @click="gotoHello">去learns</button>
    <router-view />
    </div>
    </template>

    <script>
    export default {
    name: 'App',
    components: {

    },
    data(){
    return{
    helloparams:"hellodemo",
    clickParams:"hahaha"
    }
    },
    methods: {
    gotoHello() {
    //this.$router.push("/h")
    //this.$router.replace("/h")
    //this.$router.go(-1)
    this.$router.push({name:"learn",params:{id:this.clickParams}})
    }
    }
    }
    </script>

    <style>
    #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    }

    ul li {
    text-align: center;
    display: inline-block;
    text-decoration: underline;
    cursor: pointer;
    color: blue;
    }

    ul li+li {
    margin-left: 20px;
    }

    .btn {
    border: 1px solid #fff;
    padding: 5px;
    color: #fff;
    background-color: #0000FF;
    cursor: pointer;
    }

    /* router-link-exact-active 精准匹配
    */
    /* .router-link-active{color:red;} */
    .active{color:red;}
    .currentactive{border:1px solid blue;}
    </style>

  • 相关阅读:
    用WinForm写的员工考勤项目!!!!!!
    洛谷P1892《[BOI2003]团伙》
    洛谷P1821《[USACO07FEB]银牛派对Silver Cow Party》
    洛谷P1149《火柴棒等式》
    2017 国庆清北刷题冲刺班《角谷猜想》
    洛谷P2330《[SCOI2005]繁忙的都市》
    洛谷P1955《[NOI2015]程序自动分析》
    洛谷P1536《村村通》
    Windows 10 体验记
    洛谷P1102《A-B数对》
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11337309.html
Copyright © 2011-2022 走看看