vue.js - 如何在 vue-cli 中更改每个页面的 css 样式
问题描述
这是 App.vue 文件
<template>
<div id="app">
<main-header/>
<router-view/>
<main-footer/>
</div>
</template>
<script>
import MainHeader from './components/layouts/MainHeader'
import MainFooter from './components/layouts/MainFooter'
export default {
name: 'App',
components: {
'main-header': MainHeader,
'main-footer': MainFooter
}
}
</script>
Header.vue 文件是
<ul class="nav nav-pills" id="mainNav">
<li class="dropdown">
<a class="active" href="/">
Home
</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="/test1">
test1
</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="/test2">
test2
</a>
</li>
</ul>
我想为每个页面以不同的方式激活“活动类”。我不知道该怎么做
如果我单击“test2”,活动类必须只使用带有“test2”的标签来维护我该如何解决这个问题?
解决方案
您可以考虑使用带有prop的 Vue-routeractive-class
<ul class="nav nav-pills" id="mainNav">
<router-link to="/" tag="li" class="dropdown" active-class="active">Home</router-link>
<router-link to="/test1" tag="li" class="dropdown-item dropdown-toggle" active-class="active">Test1</router-link>
<router-link to="/test2" tag="li" class="dropdown-item dropdown-toggle" active-class="active">Test2</router-link>
</ul>
另一个天真的解决方案是检查window.location.href
,但要涵盖所有可能的情况并不简单。
<ul class="nav nav-pills" id="mainNav">
<li class="dropdown">
<a class="active" href="/">
Home
</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="/test1" :class="getClass('/test1')">
test1
</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="/test2" :class="getClass('/test2')">
test2
</a>
</li>
</ul>
<script>
export default {
methods: {
getClass(url) {
if (window.location.href.includes(url)) {
return "active"
}
return ""
}
}
}
</script>
推荐阅读
- nginx - nginx有时会停止
- html - 在Angular js中显示子任务(与任务相关)
- mongodb - 在 mongod.conf 中设置任何需要 50 毫秒或更长时间的进程
- java - .jar 文件的手册页?
- javascript - 如果 keepfocus 设置为 false,react-day-picker 不会关闭
- javascript - 复选框 True/False - 添加到计算
- swift - MacOS 在 StatusBar 上创建 ProgressBar
- vba - 如何将工作表设置为变量以获取更多方法(带循环)
- reactjs - Axios 获取带有标头的请求不起作用
- amazon-web-services - 无法在 AWS Quick Sight 中解析来自 S3 的 JSON 文件