Vue实战狗尾草博客后台管理系统第二章

本章主要内容如下：底层布局，路由配置，github仓库推送关联。

关联GitHub仓库

> 关联建立在github已创建账号的基础上
复制代码

1. 登录自己的Github账号

2. 新建项目 image-20190514103344039.png

3. 然后根据自己的情况添加名称和描述 image-20190514103449655.png

新建完成后，我们只需要按照提示的信息一步一步完成即可 image-20190514103546895.png

5. 复制命令行到项目终端，回车即可实现推送。 为了验证推送的readme.md文件我们刷新github，即可看到自己添加的readme文件已经才存在仓库之中，下来我们就需要添加项目中的主要文件了

依次执行以下命令

git add .
git commit -m "first commit"
git push origin master
复制代码

推送成功后，再次刷新github，即可看到自己的项目被推送到了仓库之中。

这里需要注意的是，项目中会有一个.gitignore的git配置文件，大家可以在改该文件中进行推送文件的过滤设置，比如，我们打包获得dist文件夹，及node_modules依赖包都是我们需要过滤的。当然这里默认配置已经做好了过滤，我们不再需要做过多处理，大家根据具体情况使用即可。 image-20190514104437402.png

至此git的关联就配置完毕，之后大家只需要每天在项目做了更改后，使用以下命令进行提交推送

git add .
git commit -m "05-14完成某新功能开发"
git push origin master
复制代码

底层布局的配置

布局思路，我们需要实现的布局为header,aslide,main,footer部分，一个标准的管理平台的底层布局，但是我们也需要考虑，404页面，登录页面等。这些页面都是单独存在的页面，是不需要底层布局的支持的。如果小伙伴用过nuxt.js的话，应该会对Layout的这种思想会非常熟悉。通过改变不同的layout来实现整体大的布局的change。其实nuxt.js的这种实现底层也是通过嵌套路由这一思路实现的。这里就不多做阐述。 实现的思路：

1. 搭建layout布局模板。除了登录，404，报错等其他页面都需要使用
2. 搭建路由，layout布局模板为一级路由，首页，文章等大多页面都写在layout一级路由的二级中(children)，
3. 登录，404，报错路由则写在和layout布局同级。

这就是一个基本的流程啦。走你~

1. 我们在src文件夹下新建pages文件夹，主要存放我们的主要组件。新建home文件夹，home文件夹下新建index.vue组件随便写点什么。

<template><div>这里是首页</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped></style>
复制代码

在components下新建commons文件夹 ，commons下新建Layout.vue文件。该文件作为我们的底层的布局文件。这里element有现成的布局组件，我们只需要'考皮'即可。不过还是需要添加些许的样式的。文件如下： Layout.vue:

<template><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container class="loading-area"><el-main><router-view></router-view></el-main><el-footer>Footer</el-footer></el-container></el-container>
</el-container>
</template>
<script>
export default {}
</script><style lang="less" scoped>.el-container {width: 100%;height: 100%;}.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}
</style>
复制代码

布局文件有了，但怎么使用嘞？继续走

1. 打开router下的index.js文件。让我们按照开始时所说的嵌套路由的写法来实现

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)const _import = file => () => import('@/pages/' + file + '.vue');
const _import_ = file => () => import('@/components/' + file + '.vue');export default new Router({routes: [{path: '/login',name: 'login',component: _import('login/index')},{path: '/',name: 'home',component: _import_('commons/Layout'),redirect: '/index',children: [{path: '/index',name: 'index',component: _import('home/index')}]},]
})
复制代码

当然要使用这种的import引入文件，我们就需要特定文件的支持。查看根目录文件夹下是否含有.babelrc文件和.postcssec.js文件，如果没有的话记得添加上即可。

路由中引入了login，但是我们还没有创建，所以我们需要跟进一下，创建一个登录页面。

1. pages>login>index.vue

<template><div>登录</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped></style>
复制代码

随后保存，这里我们的底层的布局就算搞定了，随后的404和报错的页面都和登录页面一样在路由中配置即可。

检测一下~

打开项目启动的地址，可以看到默认访问的是我们的index image-20190514111003548.png

而后更改路由地址为login image-20190514111127313.png

即可看到登录页面是没有底层layout支持的。其实现的关键就在嵌套路由的使用

当然，我还见过另一种实现方式，定位~将404页面登录页面采用窗口定位至全屏大小。但是这样做有一个致命性的问题，很容易造成布局混乱。定位是我们一般要尽量避开的使用元素，脱离文档流，总会造成我们无法想象的bug。

路由的配置

路由缓存

基本的路由配置也就是我们上面的router/index.js文件，不过这里我还是要做一些添加的，因为，如果我们要使用缓存呢？是不是keep-alive就派上用场了？

实现思路：我们在每个页面对应的路由添加meta对象，该对象中添加自定义属性isAlive属性，我们定义当他为true时，我们让这个路由采用缓存，否则就不采用缓存。

比如说我们要实现首页路由的缓存，我们就这样整：

{path: '/',name: 'home',component: _import_('commons/Layout'),redirect: '/index',children: [{path: '/index',name: 'index',component: _import('home/index'),meta: {isAlive: true}}]},
复制代码

然后修改Layout.vue文件：

<template><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container class="loading-area"><el-main><keep-alive><router-view v-if="this.$route.meta.isAlive"></router-view></keep-alive><router-view v-if="!this.$route.meta.isAlive"></router-view></el-main><el-footer>Footer</el-footer></el-container></el-container>
</el-container>
</template>
复制代码

这样keep-alive缓存的使用也就是这样啦。好继续走

路由拦截

> 使用情景，有些页面是需要登录后才可以访问，我们就需要在路由即将跳转的时候，进行判断，查看user是否登录，如果登录后，就正常跳转，否则就让他去登录
复制代码

路由守卫分为两种前置守卫和后置守卫，这样的叫法比较洋气哈，其实也就是路由拦截器。

跳转前和跳转后的区别。这里拦截我们需要在跳转前进行登录的判断。

由配置的顺序对路由的加载也是有很大的影响，我们后台管理系统，需要先进行登录处理，然后会默认访问首页，当然，我们也要考虑到404页面，404页面包括哪些呢？

我对404的理解就是在路由的映射列表中，没有找到对应的路由从而返回404；

这里，我们可以采用”*”通配符来进行匹配，当然顺序也是要注意的，login。首页 》children。 404。 *

`. router文件夹下新建permission.js文件，内容如下：

import VueCookies from 'vue-cookies';
import router from './index';// 全局钩子函数
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
// next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
// next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
// next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
// 确保要调用 next 方法，否则钩子就不会被 resolved。router.beforeEach((to, from, next) => {if (to.meta.title) {document.title = to.meta.title ? to.meta.title : '狗尾草博客管理系统';}// 判断是否需要登录权限if (to.matched.some(res => res.meta.auth)) {// 判断是否登录if (VueCookies.isKey('isLogin')) {console.log('已登录');next()} else {console.log('未登录');next({name: 'Login',}) // 没登录则跳转到登录界面}} else {next()}
});router.afterEach((to, from) => {//跳转后你要做的事情
})export default router
复制代码

1. 修改main.js中路由的引入：

import router from './router/permission';
复制代码

然后重启一下，我们再访问index页面，因为cookie中并没有存储isLogin字段，所以认为没有登录，他就会跳转到登录页面，让我们去登录。

1. 当然路由远比我们想想的拥有更多的功能，路由分为静态路由和动态路由，模式也有划分hash和history模式，这里我们对router/index.js文件进行一个优化

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)const _import = file => () => import('@/pages/' + file + '.vue');
const _import_ = file => () => import('@/components/' + file + '.vue');const asyncRouterMap = [];const constantRouterMap = [{path: '/login',name: 'login',component: _import('login/index'),},{path: '/',name: 'Home',component: _import_('commons/Layout'),redirect: '/index',children: [{path: '/index',name: 'Index',component: _import('home/index'),meta: {isAlive: true,auth: true,}}]},
];const router = new Router({mode: 'history',routes: constantRouterMap,linkActiveClass: "router-link-active",
});export default router
复制代码

mode: 为路由设置模式 history模式和hash模式 routers选择静态资源路由还是动态资源路由 linkActiveClass路由切换时的元素的类名

接下来，当我们访问index路由的时候，因为没有存储isLogin登录信息，所以页面访问index，页面会跳转到login页面。

总结

路由的使用有多重方式，嵌套路由也有很多种的实现，大家要思路活跃，勇于尝试新的方法。做一个威武的前端攻城狮！

下一章

vux状态管理,面包屑导航,菜单栏管理