一.路由需求背景
当我们想要实现点击部门管理就展示部门管理的页面，点击员工管理就展示员工管理的页面这一效果时，我们就要使用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