Vue+ElementUI 導航元件
阿新 • • 發佈：2021-06-12
建立導航頁元件
在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%">
網站首頁
啟動專案
我們可以看一下主頁現在的樣子
這裡面用到了一些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元件。至此，一個可以進行路由跳轉的主頁就完成了。
轉 ：https://www.cnblogs.com/BlueSkyyj/p/11508260.html