1.开启el-menu的router属性

开启el-menu的router属性，在每个el-menu-item的index里填写路由地址。 为了保证菜单选中效果，设置activeIndex为this.$route.path

<template>
  <div class="mynavbar_container">
    <el-row>
      <el-col :span="16" :offset="4">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            router
            mode="horizontal"
            @select="handleSelect"
            background-color="#104E8B"
            text-color="#fff"
            active-text-color="#ffd04b">
          <div class="mynavbar_logo_div">
            <img class="mynavbar_logo_img" src="https://img.simoniu.com/vue_logo_200px.png"/>网站名称
          </div>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/course">教程</el-menu-item>
          <el-menu-item index="/articles">博文</el-menu-item>
          <el-submenu index="">
            <template slot="title">项目</template>
            <el-menu-item index="/some1">选项1</el-menu-item>
            <el-menu-item index="/some2">选项2</el-menu-item>
            <el-menu-item index="/some3">选项3</el-menu-item>
          </el-submenu>
          <el-menu-item index="/search"><i class="el-icon-search"></i>搜索</el-menu-item>
          <el-submenu index="/users" v-if="isLogin">
            <template slot="title"><el-avatar :size="28" :src="circleUrl"></el-avatar></template>
            <el-menu-item index="/center"><i class="el-icon-user"></i>个人中心</el-menu-item>
            <el-menu-item index="/order"><i class="el-icon-shopping-cart-1"></i>我的订单</el-menu-item>
            <el-menu-item index="/favorites"><i class="el-icon-star-off"></i>我的收藏</el-menu-item>
          </el-submenu>
          <div class="mynavbar_login_div"  v-if="!isLogin"><a href="/login">登录</a></div>

        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MyNavBar",

  data() {
    return {
      activeIndex: this.$route.path,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      isLogin: true
    };
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
.mynavbar_container {
  width: 100%;
  margin: 0px auto;
  background-color: #104E8B;

  /*导航栏固定在页面顶部*/
  top: 0;
  left: 0;
  z-index: 200; /*这个值不要设置太大，否则会遮盖messagebox*/
  position: fixed;
}

.mynavbar_logo_div {
  float: left;
  width: 120px;
  height: 60px;
  vertical-align: middle;
  color: #ffffff;
}

.mynavbar_login_div{
  float: right;
  width: 120px;
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
  color: #ffffff;
  text-align: left;
}

.mynavbar_login_div a{
  color: #ffffff;
  text-decoration: none;
  font-size: 10pt;
}

.mynavbar_logo_img {
  margin: 18px 0px;
  width: 32px;
  height: 32px;
  display: inline;
  vertical-align: middle;
}

.el-menu-item , .el-submenu {
  width: 120px;
  text-align: center;
}

.el-menu--horizontal .el-menu .el-menu-item{
  width: 200px;
  text-align: center;
}
</style>

2.设置默认出错页面

如果导航栏上的某个路由地址不存在，我们可以通过设置默认出错页面解决。

在所有路由配置最前面配置默认路由出错页。

//默认404错误页面
{
      path: '*',
      name: 'pNotFound',
      component: resolve => require.ensure([], () => resolve(require('@/views/MyNotFound')), 'pNotFound'),
      meta: {
            title: '404未找到',
      }
},