vue-router配置多级路由跳转顶部的menu导航也跳转不见了

Question

以下是代码
app.vue

<template>
<div>
<menu></menu>
 <router-view></router-view>
</div>
</template>

<script>
import menu from './components/menu';
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

menu.vue

<template>
  <div class="hello">
   <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <router-link to="/center">首页</router-link>
   <router-link to="/message">消息中心</router-link>
   <router-link to="/order">订单中心</router-link>
  <router-link to="/workplat"></router-link>
</el-menu>
  
</div>
</template>

<script>
export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

router.js的配置

import Vue from 'vue'
import Router from 'vue-router'

import menu from '@/components/menu'
import center from '@/components/center'
import message from '@/components/message'
import order from '@/components/order'
import workplat from '@/components/workplat'

import login from '@/components/login'
import check from '@/components/check'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'menu',
      component: menu
    },
    {
      path: '/center',
      name: 'center',
      component: center
    },
    {
      path: '/message',
      name: 'message',
      component: message
    },
    {
      path: '/order',
      name: 'order',
      component: order
    },
    {
      path: '/workplat',
      name: 'workplat',
      component: workplat
    },
    {
      path: '/login',
      name: 'login',
      component: login
    }, {
      path: '/check',
      name: 'check',
      component: check
    }
  ]
})

首页

center页面

为什么从首页跳到center.vue这个路由 menu的组件不见了 正常应该显示啊？

Answer 1

app.vue里面 menu 组件没有被注册 你看到的只是你路由上的menu不是你组件上的

试试在app.vue里面 加上components: {menu},