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 就可以了

  • 相关阅读:
    windows live writer 测试
    2011518资金净流入
    做人真善美,做事拖后腿
    今日盘面分析2011517
    近期国际版概念(5月19日益盟消息回顾)
    linux 系统应用程序桌面图标显示及进程自启动
    C#中发送邮件(以ASP.NET为例)
    Jquery使用$.Post方法,本地可以,服务器错误的处理方法...
    Silverlight中使用动画的技巧
    Silverlight之Easing
  • 原文地址:https://www.cnblogs.com/ralapgao/p/10168813.html
Copyright © 2011-2022 走看看