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