<template>
<div id="home">
<home-view></home-view>
<news-view></news-view>
<router-link to="./HomeCon"></router-link>
<router-link to="./NewsCon"></router-link>
<ul>
<li class="nav-item" v-for="(item,index) in nav" @click="routerLink(index, item.path)" :key="index">
<p :class="navIndex === index ? 'item-cn item-cn-active' : 'item-cn'"> {{ item.title }}</p>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default{
name:"Home",
data(){
return{
nav: [
{title: '首页', path: '/'},
{title: '列表', path: '/list'}
],
navIndex: 0
}
},
methods:{
routerLink(index, path) {
// 点击哪个路由就赋值给自定义的下标
this.navIndex = index;
// 路由跳转
this.$router.push(path)
}
}
}
</script>
<style scoped>
</style>
原文：https://blog.csdn.net/weixin_42220315/article/details/80662113
