how to keep css style by using vue

Question

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?

Have you considered just modifying active route css classes like router-link-active? It does the mapping of active route for you. More here: router.vuejs.org/api/#active-class — artoju
– artoju, Commented Jan 15, 2019 at 10:58
adding router-link-active css style is working, but I still wonder why — zhengyu
– zhengyu, Commented Jan 15, 2019 at 11:09

drunkZombie · Accepted Answer · 2019-01-15 21:28:13Z

1

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();
}

answered Jan 15, 2019 at 21:28

drunkZombie

1821 gold badge3 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to keep css style by using vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related