vue-router 设置active路由颜色

声明：以下是vue3设置方式，vue2一样

 

第一步

createRouter({
    // router-line-active 可以自定义别的名字，随便
    linkActiveClass: 'router-line-active',
    history: createWebHistory(),
    routes
})

 

第二步

在navView.vue加入此样式，字体颜色就是pinkactive{ color:pink}

navView.vue 即是设置router-link的组件：比如app.vue

<template>
    <div>
        <router-link to="/home">home</router-link>
        <router-link to="/about">about</router-link>
    </div>
    <hr>

    <router-view></router-view>
</template>

<style>
.router-line-active{
    color: pink;
}
</style>