Vue+ElementUI 導航組件

創建導航頁組件

在components目錄下新建一個navigation目錄，在Navi目錄中新建一個名為Navi.vue的組件。至此我們的目錄應該是如下圖所示： 

 

 然后我們修改main.js文件，修改后的文件如下

import Vue from 'vue'
//import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Navi from './components/navigation/Navi.vue'



Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

new Vue({
  el: '#app',
  router,
  render: h => h(Navi)
})

我們可以看到render函數的參數由之前的App變為我們新創建的Navi組件。從此我們的程序入口中顯示的就是這個Navi.vue里面的內容。之前默認生成的App.vue文件已經無用，我們可以刪掉它。 接下來我們對導航頁進行簡單的布局，我們先來看一下布局的代碼 

Navi.vue

<template>
    <div style="background-color: #EBEBEB;min-height:800px">
        <div style="width:100%;background-color: #636363; overflow: hidden">
            <span class="demonstration" style="float:left;padding-top:10px;color:white;margin-left:1%">
                網站首頁
            </span>
            <span class="demonstration" style="float:left;padding:5px;color:white;margin-left:2%;width:15%">
                <el-input
                    placeholder="請輸入"
                    icon="search"
                    v-model="searchCriteria"
                    :on-icon-click="handleIconClick">
                </el-input>
            </span>
            <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    admin<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>個人信息</el-dropdown-item>
                    <el-dropdown-item>退出登錄</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>

        <div style="margin-top:5px">
            <el-row :gutter="10">
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                    <div>
                        <el-menu default-active="1" class="el-menu-vertical-demo" style="min-height:800px">
                            <el-menu-item index="1"><i class="el-icon-message"></i>導航一</el-menu-item>
                            <el-menu-item index="2"><i class="el-icon-menu"></i>導航二</el-menu-item>
                            <el-menu-item index="3"><i class="el-icon-setting"></i>導航三</el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <el-col :xs="20" :sm="20" :md="20" :lg="20">
                    <div>
                        <div style="border: 1px solid #A6A6A6; border-radius:6px; padding:5px; margin:2px; background-color: white">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.id">{{item}}</el-breadcrumb-item>

                            </el-breadcrumb>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            return {
                searchCriteria: '',
                breadcrumbItems: ['導航一'],
            }
        },

        methods:{
            handleIconClick(ev) {
                console.log(ev);
            }
        },
    }
</script>

 

啟動項目

我們可以看一下主頁現在的樣子 

 

 

這里面用到了一些ElementUI的組件，比如左側的菜單欄，和右側顯示着“導航一”的面包屑組件等。使用el-row和el-col的作用是對組件進行響應式處理。這些組件的詳細使用方法都可以在ElementUI的官方網站中找到。

 

配置路由信息
創建好了首頁導航欄之后，我們需要對路由信息進行配置，vue-router是vuejs單頁面應用的關鍵。在配置路由信息之前，我們先把需要跳轉到的頁面創建出來。我們首先在src目錄下創建pageview並在其下創建三個新組件：page1、page2和page3，分別在里面加入一行字，例如page1

<template>
<div>
這是第一個頁面
</div>
</template>
<script type="text/ecmascript-6">
export default {
data(){
return {}
}
}
</script>

 

page2和page3分別寫“這是第二個頁面”、“這是第三個頁面”。 
這三個頁面就代表了我們寫的三個要跳轉的頁面。接下來我們使用

修改router目錄下的index.js就是vue-router的配置文件。我們在這個文件中加入如下代碼：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Page1 from '@/pageview/Page1.vue'
import Page2 from '@/pageview/Page2.vue'
import Page3 from '@/pageview/Page3.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1
    },
    {
      path: '/page2',
      name: 'Page2',
      component: Page2
    },
    {
      path: '/page3',
      name: 'Page3',
      component: Page3
    },
  ]
})

export default router;

 

這里就是對跳轉路徑的配置。然后修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//import App from './App'
//import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Navi from './components/navigation/Navi.vue'

import router from './router/index'

Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

new Vue({
  el: '#app',
  router,
  render: h => h(Navi)
})

 

這樣我們的router就可以全局使用了。 
接下來我們修改Navi.vue， 
修改后的文件如下：

<template>
    <div style="background-color: #EBEBEB;min-height:800px">
        <div style="width:100%;background-color: #636363; overflow: hidden">
            <span class="demonstration" style="float:left;padding-top:10px;color:white;margin-left:1%">
                網站首頁
            </span>
            <span class="demonstration" style="float:left;padding:5px;color:white;margin-left:2%;width:15%">
                <el-input
                    placeholder="請輸入"
                    icon="search"
                    v-model="searchCriteria"
                    :on-icon-click="handleIconClick">
                </el-input>
            </span>
            <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    admin<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>個人信息</el-dropdown-item>
                    <el-dropdown-item>退出登錄</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>

        <div style="margin-top:5px">
            <el-row :gutter="10">
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                    <div>
                        <el-menu default-active="1" class="el-menu-vertical-demo" style="min-height:800px" @select="handleSelect">
                            <el-menu-item index="1"><i class="el-icon-message"></i>導航一</el-menu-item>
                            <el-menu-item index="2"><i class="el-icon-menu"></i>導航二</el-menu-item>
                            <el-menu-item index="3"><i class="el-icon-setting"></i>導航三</el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <el-col :xs="20" :sm="20" :md="20" :lg="20">
                    <div>
                        <div style="border: 1px solid #A6A6A6; border-radius:6px; padding:5px; margin:2px; background-color: white">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.id">{{item}}</el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                    </div>

                    <div style="margin-top:10px">
                        <router-view></router-view>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            return {
                searchCriteria: '',
                breadcrumbItems: ['導航一'],
            }
        },

        methods:{
            handleIconClick(ev) {
                console.log(ev);
            },

            handleSelect(key, keyPath){
                switch(key){
                    case '1':
                        this.$router.push('/Page1');
                        this.breadcrumbItems  = ['導航一']
                        break;
                    case '2':
                        this.$router.push('/Page2')
                        this.breadcrumbItems  = ['導航二']
                        break;
                    case '3':
                        this.$router.push('/Page3')
                        this.breadcrumbItems  = ['導航三']
                        break;
                }
            },

        },
    }
</script>

注意文件中多了一個

<div style="margin-top:10px">
    <router-view></router-view>
</div>

 

這個router-view就是用來顯示跳轉的頁面，也就是page1，page2和page3。我們給左側的菜單欄添加了一個響應，在響應函數中作出了路由跳轉的處理。this.$router.push('/Page1');這句話的意思就是將當前要跳轉的頁面push到router的數組中。這里使用push而不是直接給數組賦值的原因是希望用戶點擊瀏覽器中的后退和前進按鈕時可以回到之前操作的頁面。修改完成后我們可以看一下效果，注意瀏覽器地址欄的變化： 

 

 

 

可以看到我們在點擊左側導航欄里面不同的條目時，瀏覽器地址欄里顯示的地址作出了改變，右側顯示的文字也分別對應三個page組件。至此，一個可以進行路由跳轉的主頁就完成了。

 

配置favicon圖標

利用vue-cli腳手架搭建的項目，如果不手動配置，頁面中是不會顯示favicon圖標。

avicon圖標的配置也很簡單，vue-cli默認幫我們安裝了html-webpack-plugin（如果沒有，可以自己npm安裝），我們只需在html-webpack-plugin插件中添加favicon選項即可。html-webpack-plugin插件需要配置兩處，一處是在開發環境下配置，另一處是在打包后的環境下配置，如果只配置開發環境下的，沒有配置打包后環境的，造成的結果就是，項目本地運行時會有favicon圖標，打包后放在服務器上時發現沒有favicon圖標；反之亦然。詳細配置如下：

1、開發環境（開發調試時）配置：

favicon: 'src/assets/img/favicon.ico',

 

 

2、生產環境（打包后）配置：

favicon: 'src/assets/img/favicon.ico',

 

 

注意：配置favicon圖標的路徑是相對路徑！！！

 

修改配置文件后需重啟npm run dev