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 我們見吧！