vuejs学习——vue+vuex+vue-router项目搭建(二)

前言

　最近比较忙，所有第二章发布晚了，不好意思各位。

   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.13  --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 我们见吧！