vue 导航栏

<ul class="navlist">
        <li v-for="item in nav" :key="item.id" :class="currentRoute === item.route? 'active': ''" @click="goRoute(item.route)">{{item.text}}</li>
      </ul>

  data () {
    return {
      nav: [
        {text: '首页', route: '/home'},
        {text: '购物', route: '/gouwu'},
        {text: '超市', route: '/chaoshi'},
        {text: '信用', route: '/xinyong'},
        {text: '保姆', route: '/baomu'}
      ],
      currentRoute: '/home'
    }
  },
  mounted () {
    this.currentRoute = window.location.pathname
    window.addEventListener('popstate', () => {
      this.currentRoute = window.location.pathname
    })
  },
  methods: {
    goRoute (route) {
      this.currentRoute = route
      this.$router.push(route)
    }
  }

mode: 'history', //历史模式
  routes: [
    {
      path: '*',    //配置404页面
      component: NotFoundComponent   
    }
]