循环多个router-link导航栏含可用路由

最新推荐文章于 2024-08-11 00:13:57 发布

blueS~

最新推荐文章于 2024-08-11 00:13:57 发布

阅读量1.3k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42707181/article/details/90574489

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html代码

  <li v-for="item in navs" class="nav">
              <router-link class="nav-item" :to="{path: '/' + item.path}">{{item.name}}</router-link>
  </li>

css代码

          .nav-item {
            display: block;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.6px;
            color: rgba(153, 153, 153, 1);
            line-height: 24px;

            &.router-link-active {
              color: rgba(51, 51, 51, 1);
            }
          }
        }

js代码

export default {
data(){
return{
    navs: [{
            name: '我们的产品',
            type: 'product',
            path: 'product'
          },
          {
            name: '产品详情',
            type: 'productDetails',
            path: 'productDetails'
          }
        ],
}
}

路由导航代码

export default new Router({
    mode: 'history', //路由模式
    routes: [
        {
            path: '/product',
            name: 'product',
            component: product
        },
        {
            path: '/productDetails',
            name: 'productDetails',
            component: productDetails
        }
    ]
})