5 Vue路由
5.1 路由介绍
将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级，其结构如下：
此时我们希望基于4.4案例中的功能，实现点击侧边栏的部门管理，显示部门管理的信息，点击员工管理，显示员工管理的信息，效果如下图所示：
这就需要借助我们的vue的路由功能了。
前端路由：URL中的hash(#号之后的内容）与组件之间的对应关系，如下图所示
当我们点击左侧导航栏时，浏览器的地址栏会发生变化，路由自动更新显示与url所对应的vue组件。
而我们vue官方提供了路由插件Vue Router,其主要组成如下：
VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
其工作原理如下图所示：
首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;
然后我们页面提供一个<router-link>组件,用户点击，发出路由请求;
接着我们的VueRouter根据路由请求，在路由表中找到对应的vue组件；
最后VueRouter会切换<router-view>中的组件，从而进行视图的更新
5.2 路由入门
接下来我们来演示vue的路由功能。
首先我们需要先安装vue-router插件，可以通过如下命令
npm install vue-router@3.5.1
但是我们不需要安装，因为当初我们再创建项目时，已经勾选了路由功能，已经安装好了。
然后我们需要在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改，最终代码如下：
import Vue 'vue' import VueRouter 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/emp', //地址hash name: 'emp', component: () => import('../views/tlias/EmpView.vue') //对应的vue组件 }, { path: '/dept', name: 'dept', component: () => import('../views/tlias/DeptView.vue') } ] const router = new VueRouter({ routes }) export default router
注意需要去掉没有引用的import模块。
在main.js中，我们已经引入了router功能，如下图所示：
路由基本信息配置好了，路由表已经被加载，此时我们还缺少2个东西，就是<router-lin>和<router-view>,所以我们需要修改2个页面（EmpView.vue和DeptView.vue）我们左侧栏的2个按钮为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中定义route-view，作为组件的切换，其App.vue的完整代码如下：
<template> <div id="app"> <!-- {{message}} --> <!-- <element-view></element-view> --> <!-- <emp-view></emp-view> --> <router-view></router-view> </div> </template> <script> // import EmpView './views/tlias/EmpView.vue' // import ElementView './views/Element/ElementView.vue' export default { components: { }, data(){ return { "message":"hello world" } } } </script> <style> </style>
发现一片空白，因为我们默认的路由路径是/,但是路由配置中没有对应的关系，
所以我们需要在路由配置中/对应的路由组件，代码如下：
const routes = [ { path: '/emp', name: 'emp', component: () => import('../views/tlias/EmpView.vue') }, { path: '/dept', name: 'dept', component: () => import('../views/tlias/DeptView.vue') }, { path: '/', redirect:'/emp' //表示重定向到/emp即可 }, ]
此时我们打开浏览器，访问 发现直接访问的是emp的页面，并且能够进行切换了，其具体如下图所示：
到此我们的路由实现成功。
