前言
最近比较忙，所有第二章发布晚了，不好意思各位。
vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目，我相信大家已经体验了vue其中的奥妙了，接下来我们结合vue-router来玩玩路由吧！在使用vue-router的同时也要熟悉官方api
准备
进入项目文件
打开Node.js command prompt 命令方式进入上章我们创建的VueProject文件夹
npm下载安装vue-router
cnpm install vue-router --save （--save ：安装后放在package.json 的dependencies，这样方便我们查看等）
运行完上面代码，我们打开项目文件在根目录下找到package.json文件打开
这里面会看到我们很多插件的版本号，在dependencies中你会看见我们刚刚安装的 vue-router，进入vue-router的github 看见一句 This is vue-router 2.0 which works only with Vue 2.0 瓦特我明明安装vue-router1的官网跑的为什么变成了vue-router2版本了，万能的网友帮助了我原来也要像webpack的时候加上版本号
vue-router1
cnpm install vue-router@0.7. --save
上面安装完成 我们查看以下package.json文件
版本号变了，ok 曲折的道路，我们安装完成了，我们接下来新建几个页面试试.npm run dev go!
欧，报错了！大概看看了 需要我们安装vue-loader，
cnpm install vue-loader --save
npm run dev 走起！ 这下成功了我们接下来开始玩吧。
引入vue-router
打开mian.js 引入路由
import VueRouter from 'vue-router' Vue.use(VueRouter) var router = new VueRouter()
挂载路由
router.start(App, "#app")
路由重定向：除了路由配置的地址全部跑/main页面
router.redirect({
'*': '/main'
})
下图是我引入搭建好的结果
引入了vue-router接下来我们新建页面玩玩吧。
登陆页
首先我们的目录结构大概放上图，新手画不出结构数，按照这个结构我们新建出对应的文件夹。
接下来我们在main文件夹里面新增Login.vue。
大概布局为下图，我们粗略走流程，样式不好看请多包含。
布局完后接下来，给用户名和密码绑定对应属性
data() {
return {
name: '', //用户名
password: '', //密码
}
},
登陆方法实现：
login() {if(this.name != '' && this.password != '') {
this.$route.router.go({
path: 'main' //mian页面下面搭建
})
} else {
layer.msg('账号或密码不能为空！')//我们判断下账号密码是否为空
}
}
mian页面
接下来我们在view文件夹里新建mian页面，mian页面主要放主体组件的，如
我们搭建一个常用的后台管理界面：组件分为：头像 user 导航 MenuLeft 顶部导航 AsideHead 都新建在view文件夹里 最近文件结构树如下
样式界面我就不和大家一起实现 大概实现完界面如下
content页面
content页面一共分为三个页面 默认页面 主页 导航 这是哪个页面 内容随便，结构如下
路由配置
界面大概都搭建好了，接下来我们进入mian.js 配置路由 ，首先 login登陆调整到mian页面 mian页面中的menu导航点击 调整其余content页面 ，者mian页面下面有子路由，代码如下
router.map({
'/login': {
name: "login",
component: function(resolve) {
require(['./components/main/Login'], resolve)
}
},
'/main': {
component: function(resolve) {
require(['./components/view/main'], resolve)
},
subRoutes: {
'/': { //进入mian页面中 子路由默认显示
name: 'viewone',
component: function(resolve) {
require(['./components/content/ViewOne'], resolve)
}
},
'/hello': {
name: 'hello',
component: function(resolve) {
require(['./components/content/Hello'], resolve)
}
},
'/userHome': {
name: 'userHome',
component: function(resolve) {
require(['./components/content/UserHome'], resolve)
}
},
}
},
})
ok，路由配置好了， 现在我们可以实现登陆调转到mian页面，点击菜单调整子路由了。
浏览器输入http://localhost:8080/#!/login 走起
成功跑起来了，第二章可能有点乱，但思路按照常见后台管理系统走的，官方文档是最好的老师了，所有很多东西请大家参考一下官网，第三章 VUEX 我们见吧！