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>

  • 相关阅读:
    hdu 2485 Destroying the bus stations 迭代加深搜索
    hdu 2487 Ugly Windows 模拟
    hdu 2492 Ping pong 线段树
    hdu 1059 Dividing 多重背包
    hdu 3315 My Brute 费用流,费用最小且代价最小
    第四天 下载网络图片显示
    第三天 单元测试和数据库操作
    第二天 布局文件
    第一天 安卓简介
    Android 获取存储空间
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11337309.html
Copyright © 2011-2022 走看看