3 路由实现
在摸爬滚打一段时间后，决定进行路由相关的处理。
利用导航栏进行路由
本文采用的是element ui提供的组件el-menu中利用自带的index进行路由，当然也可以使用<router-link>标签来实现，不过可能会稍微麻烦一些。由于本文的例子中是不带参数的简单路由，所以直接指定路径。
看看整体路由布局（router.ts）：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: () => import('@/components/Test.vue'),
meta: { title: '首页' },
children: [
{
path: '1',
name: '1',
// 懒加载
meta: { title: '1' },
component:()=> import('@/components/1.vue'),
children: [
{
path: '1-1',
name: '1-1',
component: () => import('@/components/1-.vue'),
meta: { title: '1-1' }
}, {
path: '1-2',
name: '1-2',
component: () => import('@/components/1-.vue'),
meta: { title: '1-2' }
}, {
path: '1-3',
name: '1-3',
component: () => import('@/components/1-.vue'),
meta: { title: '1-3' }
}, {
path: '1-4',
name: '1-4',
component: () => import('@/components/1-.vue'),
meta: { title: '1-4' }
},
]
},
{
path: '2',
name: '2',
// 懒加载
component: () => import('@/components/Content.vue'),
meta: { title: '2' }
}, {
path: '3',
name: '3',
// 懒加载
component: () => import('@/components/Content.vue'),
meta: { title: '3' }
}, {
path: '4',
name: '4',
// 懒加载
component: () => import('@/components/Content.vue'),
meta: { title: '4' }
},
]
}
]
})
可以看到是一个比较简单的嵌套路由，但是在实际应用过程中还是有些问题，等系统地学习了vue-router后在尝试比较复杂的带参数的路由。
然后精简了一下侧边导航栏，让它和路由相对应。在调整侧边栏时不知道是自己的原因还是组件的原因，又出现了样式问题，然后自己摸索了一下，修改了相应的样式，最后正常显示。
.el-submenu__title,
.el-menu-item {
/* 调整子菜单的位置和文字对齐方式 */
height: 60px;
padding-right: 70px;
text-align: initial;
}
image
接下来进行el-menu的设置，直接上代码：
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:router="true"
>
<el-submenu index="/1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<el-menu-item index="/1/1-1">选项1</el-menu-item>
<el-menu-item index="/1/1-2">选项2</el-menu-item>
<el-menu-item index="/1/1-3">选项3</el-menu-item>
<el-menu-item index="/1/1-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="/2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="/3">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="/4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
将el-menu的router属性设置为true，这样就表示使用了vue-router模式，即在激活导航时以index作为path进行路由跳转。在本例中直接向index写入了绝对路径，如果不写绝对路径的话，会出现一些问题，后面会进行详细探讨。
我们分别来看下在路由中用到的相应组件的内容。
1-.vue，主要是打印当前匹配到的路由路径。
<template>
<div>
<h1>{{ $route.path }}</h1>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
1.vue，很简单，作为后边多级路由展示的一个组件。
<template>
<div>
根路由
<router-view></router-view>
</div>
</template>
content.vue，实际上也是匹配当前路由名称的组件，为了和1-.vue区分开来所以起了不一样的名字。
<template>
<h1>{{ $route.name }}</h1>
</template>
看一下实现的路由的效果：
image
image
这下简单的路由功能实现了。
动态面包屑及路由导航
面包屑是一个很有趣的组件，通常情况下起到了一个指示当前路径的作用，同样也可以用作导航。本节就专门介绍一下动态面包屑的实现。
本例中实现动态面包屑的原理就是监听路由的变化，使用vue-router中的watch方法，关于vue-router的学习，后边应该会专门学习。
首先新建一个面包屑组件Breadcrumb.vue，在官方给出的样例组件中稍作修改，这里面其实有很多路由方面的坑，后续再填吧，也是借鉴了有些网友的：
<template>
<div class="example-container">
<el-breadcrumb separator=">">
<el-breadcrumb-item
v-for="(item,index) in breadList"
:key="index"
:to="{ path: item.path }"
>{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
data() {
return {
breadList: [] // 路由集合
};
},
watch: {
$route() {
this.getBreadcrumb();
console.log(this.$route.path);
// console.log(this.breadList)
}
},
methods: {
isHome(route) {
return route.name === "home";
},
getBreadcrumb() {
let matched = this.$route.matched;
//如果不是首页
if (!this.isHome(matched[0])) {
matched = [{ path: "/", name: "首页", meta: { title: "首页" } }].concat(
matched
);
}
//如果不进行赋值，根路由会为空，最底层的导航就会失效
matched[0].path = "/";
this.breadList = matched;
}
},
created() {
this.getBreadcrumb();
}
};
</script>
在需要的组件中进行注册，本文是Test.vue：
<template>
<el-container>
<el-aside width="200px">
<navmenu></navmenu>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>
<bread></bread>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import Breadcrumb from "@/components/Breadcrumb";
import Main from "@/components/Main";
export default {
name: "app",
components: {
navmenu: Main,
bread: Breadcrumb
}
};
</script>
看一下最后的效果：
image
image
面包屑的路由导航：
image
image
至此简单的路由就实现啦，后续会继续探索相应组件的使用。
