zoukankan      html  css  js  c++  java
  • router-link 使用精确匹配

    本来不想写router 规则匹配的问题,有一个笨球问,顺带写一下,

    先配置一下路由

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Index',
          component: Index
        },
        {
            path: '/mall',
            name: 'Mall',
            component: Mall
        },
        {
            path: '/shoppingCar',
            name: 'ShoppingCar',
            component: ShoppingCar
        },
        {
            path: '/mySet',
            name: 'MySet',
            component: MySet
        },
        {
            path: '/news',
            name: 'News',
            component: News
        },
        {
            path: '/productDetail',
            name: 'ProductDetail',
            component: ProductDetail
        }
      ],
        mode: 'history',
        linkActiveClass: "active",//配置精确匹配,将router-link-active定义为active
        scrollBehavior(to, from, savedPosition) {
          // keep-alive 返回缓存页面后记录浏览位置
       //scrollBehavior 滚动行为 if (savedPosition && to.meta.keepAlive) { return savedPosition; } // 异步滚动操作 return new Promise((resolve) => { setTimeout(() => { resolve({ x: 0, y: 1 }); }, 0); }); } })

    页面路由

    <template>
        <div class="bottomNav">
            <ul>
                <li>
                    <router-link exact  :to="{ name: 'Index', params: {} }">
               <!-- exact 只要写一个就可以了 -->
                <img src="../../static/images/greenhome.png" />
    </router-link>
                </li>
                <li>
                    <router-link :to="{ name: 'Mall', params: {countt:'积分商城'} }">
                        <img src="../../static/images/grayshop.png" />
                    </router-link>
                </li>
                <li>
                    <router-link :to="{ name: 'ShoppingCar', params: {newsHeader:'购物车',upLeft:true,shopicon:false} }">
                        <img src="../../static/images/graycar.png" />
                    </router-link>
                </li>
                <li>
                    <router-link :to="{ name: 'MySet', params: {} }">
                        <img src="../../static/images/graymine.png" />
                    </router-link>
                </li>
            </ul>
        </div>
    </template>
    <style scoped>
      .acitve {
        color: red
      }
    </style>
     

    这样可以在 active 写,匹配到的样式,如果还有图片,建议将图片做成雪碧图,这样直接更改background-position 就可以了

  • 相关阅读:
    Session的配置
    插件编程小窥
    今日遇到了困难,顺便看了下SMO
    初识三层架构
    .NET文件类库
    JQuery学习笔记
    反射整理学习<二>
    通俗道破单例模式
    菜鸟写代码生成器最后一天完结篇
    卧谈会:委托与事件
  • 原文地址:https://www.cnblogs.com/ralapgao/p/10168813.html
Copyright © 2011-2022 走看看