Within my coding project, I am utilizing vue.js in the App.vue file.
I have set up route-links for goods, ratings, and seller components.
Now, I am trying to customize the colors of these links using a style module.
Below is the template section of the App.vue file:
<template>
<div id="app">
<v-header></v-header>
<div class="tab">
<div class="tab-item">
<router-link to='/'>goods</router-link>
</div>
<div class="tab-item">
<router-link to='/rating'>ratings</router-link>
</div>
<div class="tab-item">
<router-link to='/seller'>seller</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>
Next is the style module within App.vue:
<style lang="stylus" rel="stylesheet/stylus">
#app
.tab
display: flex
width: 100%
height: 40px
line-heigh: 40px
.tab-item
flex: 1
text-align: center
& > router-link
display: block
color: rgb(240, 20, 20)
</style>
However, I noticed that this specific definition wasn't effective:
& > router-link
display: block
color: rgb(240, 20, 20)
Upon inspecting it in Chrome's Elements tab, I observed that:
<route-link to='/'>goods</router-link>
had been modified to
<a href="#/" class="router-link-exact-active router-link-active">goods</a>
Even when I tested using a regular 'a' tag instead of route-link, the issue persisted, like so:
& > a
display: block
color: rgb(240, 20, 20)
I'm unsure why this behavior is occurring. Can anyone offer assistance?