【无标题】

main。js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'

Vue.config.productionTip = false

Vue.use(ElementUI);
new Vue({
	router,
  render: h => h(App),
}).$mount('#app')

app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
    
  }
}
</script>


</style>

router-index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../components/Index.vue'
import List from '../components/user/List.vue'

Vue.use(Router);

export default new Router({
	routes: [
		{
			path: '/',
			redirect: '/index',
		},
		{
			path: '/index',
			component: Index,
		},
		{
			path: '/list',
			component: List,
		}
	]
})

components下的index文件

<template>
	<el-container>
	  <el-header>
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"  @select="handleSelect">
			  <el-menu-item index="/">处理中心</el-menu-item>
			  <el-menu-item index="/list">aa</el-menu-item>
			 
			</el-menu>
			
		
		</el-header>
	  <el-main>
			<router-view/>
		</el-main>
	</el-container>
</template>

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

<style>
</style>

components下的user下的list文件

<template>
	<h1>用来显示用户猎豹</h1>
</template>

<script>
	export default {
		name:"List"
	}
</script>

<style>
</style>