Reputation: 635
I am learning vue and trying to build a website by using vue. And I set two navigation tabs in navigation bar.
Here is the router config file:
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
And 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>
When I click the execution
tab, it is expected that the background color of it is changed to #FFCC00 (tab class is nav-li active
) and browser url is /execution/list
. However, after I refresh the page, the class of management
tab is nav-li active
and background color is #FFCC00 while the url is still /execution/list
. Why does the class of management
tab become nav-li active
while class of execution
tab is nav-li
?
Upvotes: 0
Views: 301
Reputation: 163
You are running a watch
property on $route
and it works fine when there's a change in the route. But when you refresh, the route doesn't change hence the underline watch never gets triggered.
Create a mounted
function and check for route name there and modify your show
data accordingly. Something like this should work:
mounted(){
this.show = this.$route.name.toLowerCase();
}
Upvotes: 1