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

html代码

  

              {
    {item.name}}
  

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
        }
    ]
})