目录
场景
方法
代码
router.js
App.vue
Home.vue
About.vue
场景
效果如上图所示，点哪个标签该标签就显示绿色背景（即标签被激活的样式）
方法
使用router-link的exact-active-class属性，该属性设置当前标签被激活的样式
代码
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
App.vue
<template>
<div id="app">
<div id="nav">
<ul>
<li v-for="(item,index) in linkItem">
<router-link :to="item.src" exact-active-class="eac">{{item.content}}</router-link>
</li>
</ul>
</div>
<router-view/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
linkItem:[
{src:"/",content:"Home"},
{src:"/about",content:"About"},
]
}
}
}
</script>
<style>
.eac{
background: lightgreen;
}
li{
display: inline;
margin: 10px;
}
</style>
Home.vue
<template>
<div class="home">
<h1>This is an home page</h1>
</div>
</template>
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
