一.路由需求背景
当我们想要实现点击部门管理就展示部门管理的页面，点击员工管理就展示员工管理的页面这一效果时，我们就要使用Vue路由。
前端路由就是URL中的hash值与组件之间的对应关系，因此要为不同的组件设定不同的hash值。
二.Vue路由
Vue路由有三方面组成。首先VueRouter时路由器类，在其中接收路由链接组件的请求，请求中是一个组件对应的hash值，并且通过路由表找到表中该hash值对应的组件，然后将该组件渲染出来，通过路由展示组件在页面上展示。
三.实现
首先在vue项目中的router文件夹中的index.js文件中配置路由器信息。在const routes中设置。emp组件的path为/emp(hash)，而dept组件的path为/dept(hash)。并在component中将组件与其对应。
import Vue from 'vue'
import VueRouter from 'vue-router'
/* import HomeView from '../views/HomeView.vue'*/
Vue.use(VueRouter)const routes = [{path: '/emp',name: 'emp',component: () => import('../views/tlias/EmpView.vue')},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect: '/dept'}
]const router = new VueRouter({routes
})export default router
我们需要配置不同组件的不同hash值，在对应组件中使用<router-link>为其配置，
<el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link>
</el-menu-item>之后在App.vue中的<template>区域使用<router-view>标签进行展示。
<!-- 模板部分，由他生成HTML代码 相当于vue当中的视图部分 -->
<template><div> <!-- div是根标签，一个<template>标签中只能有一个根标签，也即只能有一个<template>标签 --><!-- <h1>{{ message }}</h1> --><!-- <element-view></element-view> --><!-- <emp-view></emp-view> --><router-view></router-view></div>
</template><!-- JS代码，定义vue当中的数据模型以及当中的方法 -->
<script>
/*
import ElementView from './views/element/ElementView.vue' 将ElementView.vue组件文件导入并重新命名为ElementView 注意：<template>标签里面没有定义标签，那么import的话会报错
*/
/* import EmpView from './views/tlias/EmpView.vue' */export default {components: { /* EmpView */ }, // components里面也不能有<template>中未定义的标签的vue组件data () {return {/* message:"Hello Vue" */}},methods: {}}
</script><!-- 定义CSS样式 -->
<style></style>
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
import Vue from 'vue'
import VueRouter from 'vue-router'
/* import HomeView from '../views/HomeView.vue'*/
Vue.use(VueRouter)const routes = [{path: '/emp',name: 'emp',component: () => import('../views/tlias/EmpView.vue')},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect: '/dept'}
]const router = new VueRouter({routes
})export default router
