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

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