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 咱们见吧！