javascript - 如何使用 vue 保持 css 样式
问题描述
我正在学习 vue 并尝试使用 vue 建立一个网站。我在导航栏中设置了两个导航选项卡。
这是路由器配置文件:
import Vue from 'vue'
import Router from 'vue-router'
import Management from '@/components/Management'
import Execution from '@/components/Execution'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: { name: 'Management'}
},
{
path: '/management/list',
name: 'Management',
component: Management,
},
{
path: '/execution/list',
name: 'Execution',
component: Execution
}
]
})
router.beforeEach((to, from, next) => {
next();
})
export default router
和 App.vue:
<template>
<div class="container">
<div id="header">
<ul class="nav-ul">
<router-link tag="li" :class="['nav-li', {active: show === 'management'}]" v-on:click="changeShow('management')" :to="{name: 'Management'}"><span>case management</span></router-link>
<router-link tag="li" :class="['nav-li', {active: show === 'execution'}]" v-on:click="changeShow('execution')" :to="{name: 'Execution'}"><span>case execution</span></router-link>
</ul>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
data: function(){
return {
show: 'management'
}
},
computed: {
changeShow: function (show) {
this.show = show;
}
},
watch: {
'$route'(to, from) {
if (to.name) {
this.show = to.name.toLowerCase()
}
}
}
}
</script>
<style>
.container {
height: 100%;
}
#header {
height: 50px;
width: 100%;
background-image: linear-gradient(to bottom,#FF3300 0,#ff6600 20%);
}
.nav-ul,.nav-li
{
margin: 0px;
padding: 0px;
list-style: none;
}
.nav-ul
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.nav-li {
width: 100px;
height: 38px;
text-align: center;
padding-top: 12px;
font-size: 16px;
}
.nav-li:hover {
background-color: #FFCC00;
cursor:pointer;
}
.nav-li.active {
background-color: #FFCC00;
}
</style>
当我单击execution
选项卡时,预计它的背景颜色将更改为 #FFCC00 (选项卡类为nav-li active
),浏览器 url 为/execution/list
. 但是,在我刷新页面后,management
选项卡的类是nav-li active
并且背景颜色是 #FFCC00 而 url 仍然是/execution/list
. 为什么选项卡的类别management
变为选项卡的nav-li active
类别?execution
nav-li
解决方案
您正在运行一个watch
属性,$route
并且当路线发生变化时它可以正常工作。但是当您刷新时,路线不会改变,因此下划线手表永远不会被触发。创建一个mounted
函数并在那里检查路线名称并相应地修改您的show
数据。像这样的东西应该工作:
mounted(){
this.show = this.$route.name.toLowerCase();
}
推荐阅读
- mysql - col LIKE BINARY 'val%' 比 col LIKE 'val%' 慢得多。为什么?
- r - 两个物种的离散时间竞争 - 用向量实现但坚持矩阵
- gremlin - 如何在janusgraph中的顶点上设置属性值?
- java - JAVA - Selenium WebDriver - 断言和等待
- awk - 从 CMake execute_process 内部运行 awk
- java - 如何在android studio中修复“无法解析符号'app'”?
- javascript - 如何在 Semantic-UI-React 下拉菜单中选择图像?
- php - 通过另一个表的 ID 从一个表中获取值
- r - 生产中 R 包安全性所需的建议
- javascript - javascript中出现未定义的错误(React Native)