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