I am using vue routing to configure the data here
The following is the content of index.js in routes
import VueRouter from 'vue-router';
import app from '../App'
//导入主页内容
import home from '../components/home.vue'
//导入基础内容
import basics from "../components/basics.vue";
const routes = [
//配置路由
{
path: '/',
component: app,
mate: {
title: '登录页面'
},
//默认子路由
redirect: '/home',
//子路由
children: [
{//配置主页内容
path: 'home',
name: 'home',
component: home,
},
{//配置基础内容
path: 'basics',
name: 'basics',
component: basics
}
]
},
];
const router = new VueRouter({
mode: 'history',
routes
})
export default router;
Home configuration
<!-- 首页 -->
<div>
<!-- 点击的内容 -->
<div>
<ul>
<!--点击后将路由传入(路由保证唯一)-->
<router-link to="home"><li @click="changecolor('home')" :class="activeindex=='home' ? 'textcolor': ''">主页</li></router-link>
<router-link to="basics"> <li @click="changecolor('basics')" :class="activeindex=='basics' ? 'textcolor': ''">基础</li></router-link>
</ul>
</div>
<!-- 点击出现的内容 -->
<div>
<router-view></router-view>
</div>
</div>
js
export default {
name: 'HelloWorld',
data(){
return{
activeindex:'',
}
},
mounted(){//利用函数钩子获取路由的name,赋值给样式,这样可以避免刷新路由样式改变的问题
this.activeindex=(this.$route.name);
},
methods: {//点击后将值传入进行改变样式
changecolor:function(index){
this.activeindex=index;
}
},
}
css style
.textcolor{
color: #fc5531 !important;
}
That's probably the idea, hope it helps