本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766
由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？因为我们一般用Vue做的都是单页应用，只有一个主页面index.html，所以你写的标签是不起作用的，要使用vue-router来进行管理。
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
（一）安装router
由于作者采用vue-cli脚手架来搭建项目，项目配置过程中选择是否用到路由
（详见Spring Boot Vue Element入门实战（一）VUE开发环境搭建 ），
如果选择y，后面下载依赖会自动下载vue-router。这里还是说一下安装：
cnpm install vue-router --save-dev
（二）新建router组件
在src目录下新建router文件夹，然后新建index.js
//引入router
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//新建路由文件，如果没有就添加
import Main from '@/pages/Main'
import Dashboard from '@/pages/Dashboard'
import User from '@/pages/User'
import Log from '@/pages/Log'
//定义路由，每个路由都是一个组件，每个组件由路径，组件名称，嵌套子组件等等组成
let routes = [
{
path: '/',
component: Main,
hidden: true,
children: [{
path: '/',
component: Dashboard,
name: '系统管理'
}]
},
{
path: '/',
name: '系统管理',
component: Main,
iconCls: 'fa fa-cog fa-fw',
children: [
{
path: '/user',
component: User,
name: '用户管理',
iconCls: 'fa fa-user-o fa-fw'
},
{
path: '/log',
component: Log,
name: '日志管理',
iconCls: 'fa fa-file-text-o fa-fw'
}
]
}
]
const router = new Router({
mode: 'history',//历史记录模式，去掉#
base: '/user/',
routes: routes
})
export default router
（三）在 main.js中引入
（四）在 main.vue中初始化菜单
我们需要把路由动态的遍历出来，这样以后就只需要改router了，不需要改页面菜单了
1.首先要写一个遍历router的方法，以及初始化一个放菜单数据的变量
let data = () => {
return {
collapsed: false,
systemName: '用户管理系统',
userName: 'admin',
menus: []
}
}
//这个方法就是变量菜单的方法，然后放入menus这边集合当中
let initMenu = function() {
for (let i in this.$router.options.routes) {
let root = this.$router.options.routes[i]
if (root.hidden)
continue
let children = []
for (let j in root.children) {
let item = root.children[j]
if (item.hidden)
continue
children.push(item)
}
if (children.length < 1)
continue
this.menus.push(root)
root.children = children
}
}
export default {
data: data,
methods: {
initMenu
},
mounted: function() {
this.initMenu()
}
}
2.然后把menus循环出来，生成菜单
<el-menu :default-active="$route.path" :collapse="collapsed">
<template v-for="(item,index) in menus">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title">
<i :class="item.iconCls" style="margin-left: -20px;margin-right: 10px;"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item
v-for="child in item.children"
:index="child.path"
:key="child.path"
@click="$router.push(child.path)">
<i :class="child.iconCls" style="margin-left: -20px;margin-right: 10px;"></i>{{child.name}}
</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path">
<i :class="item.iconCls" style="margin-left: -20px;margin-right: 10px;"></i>{{item.children[0].name}}
</el-menu-item>
</template>
</el-menu>
下图是最终的页面，可以点击菜单，实现页面的切换
（五）路由切换动画
在路由切换时，页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,加入了一些过度效果，用来美化路由切换，例如左右滑动，渐入渐出等等效果
<transition :name="transitionName" mode="out-in">
<router-view></router-view>
</transition>
//使用watch 监听$router的变化
watch: {
$route(to, from) {
//这里可以根据具体的场景就行切换路由
this.transitionName = 'slide-right';
}
}
//css 样式
@keyframes slideInLeft {
from {
transform: translate3d(100%, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translate3d(-100%, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideLeftOut {
from {
transform: translate3d(0, 0, 0);
opacity: 0;
}
to {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
}
@keyframes slideRightOut {
from {
transform: translate3d(0, 0, 0);
opacity: 0;
}
to {
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
}
.slide-left-enter-active {
animation: slideInLeft .3s forwards;
z-index:5;
}
.slide-left-leave-active {
animation: slideLeftOut .3s forwards;
z-index:3;
}
.slide-right-enter-active {
animation: slideInRight .3s forwards;
z-index:5;
}
.slide-right-leave-active {
animation: slideRightOut .3s forwards;
z-index:3;
}
上一篇：Spring Boot Vue Element入门实战（八）静态列表页面
下一篇：Spring Boot Vue Element入门实战（十）Vue生命周期
点击这里返回目录
程序人生，更多分享请关注公众号
源代码下载
关注上面公众号，回复源码即可获取gitbug/gitee下载地址