1.目錄簡介：

2.設定路由：

1）修改router/index.js檔案

引入元件：

import Index from '@/index' import Login from '@/login'

設定路由：

routes: [{         path: '/',//預設路由         name: 'login',         component: Login,         meta: {             title: '登入頁面',             keepAlive: false         }     }, {         path: '/index/:admin/:Right/:IsAllDesk',//首頁         name: 'index',         component: Index,         meta: {             title: '首頁',             keepAlive: true         }     }]

下面附上router/index.js的所有內容：

import Vue from 'vue' import Router from 'vue-router' import VueResource from 'vue-resource' import Index from '@/index' import Login from '@/login' import DrugTable from '@/DrugTable' import Desk from '@/desk' import Monitoring from '@/Monitoring' import EmergencyResource from '@/EmergencyResource' import EmergencyMovement from '@/EmergencyMovement' import VaccinationSupervision from '@/VaccinationSupervision' import Suggest from '@/Suggest' import Appear from '@/Appear' import AddDrug from '@/AddDrug' import VolumeReport from '@/VolumeReport' import ImportSuggest from '@/ImportSuggest' import Header from '@/Header' import InfectiousManagement from '@/InfectiousManagement' import ExportDrug from '@/ExportDrug' import OutbreakReport from '@/OutbreakReport' Vue.use(Router) Vue.use(VueResource) export default new Router({     routes: [{         path: '/',         name: 'login',         component: Login,         meta: {             title: '登入頁面',             keepAlive: false//不保留頭部內容         }     }, {         path: '/index/:admin/:Right/:IsAllDesk',         name: 'index',         component: Index,         meta: {             title: '首頁',             keepAlive: true//保留頭部內容         }     }, {         path: '/DrugTable/:admin/:Right/:IsAllDesk',         name: 'DrugTable',         component: DrugTable,         meta: {             title: '疫苗接種數報表',             keepAlive: true         }     }, {         path: '/AddDrug/:admin/:Right/:IsAllDesk',         name: 'AddDrug',         component: AddDrug,         meta: {             title: '疫苗列表',             keepAlive: true         }     }, {         path: '/ExportDrug/:admin/:Right/:IsAllDesk',         name: 'ExportDrug',         component: ExportDrug,         meta: {             title: '匯出列表',             keepAlive: true         }     }, {         path: '/desk/:admin/:Right/:IsAllDesk',         name: 'desk',         component: Desk,         meta: {             title: '課桌椅示意圖',             keepAlive: true         }     }, {         path: '/Suggest/:admin/:Right/:IsAllDesk',         name: 'Suggest',         component: Suggest,         meta: {             title: '配置資訊建議',             keepAlive: true         }     }, {         path: '/ImportSuggest/:admin/:Right/:IsAllDesk',         name: 'ImportSuggest',         component: ImportSuggest,         meta: {             title: '匯入建議',             keepAlive: true         }     }, {         path: '/Appear/:admin/:Right/:IsAllDesk',         name: 'Appear',         component: Appear,         meta: {             title: '配置資訊上報',             keepAlive: true         }     }, {         path: '/VolumeReport/:admin/:Right/:IsAllDesk',         name: 'VolumeReport',         component: VolumeReport,         meta: {             title: '批量上報',             keepAlive: true         }     }, {         path: '/InfectiousManagement/:admin/:Right/:IsAllDesk',         name: 'InfectiousManagement',         component: InfectiousManagement,         meta: {             title: '傳染病管理',             keepAlive: true         }     }, {         path: '/OutbreakReport/:admin/:Right/:IsAllDesk',         name: 'OutbreakReport',         component: OutbreakReport,         meta: {             title: '學校疫情上報',             keepAlive: true         }     }, {         path: '/Monitoring/:admin/:Right/:IsAllDesk',         name: 'Monitoring',         component: Monitoring,         meta: {             title: '監測預警管理',             keepAlive: true         }     }, {         path: '/EmergencyResource/:admin/:Right/:IsAllDesk',         name: 'EmergencyResource',         component: EmergencyResource,         meta: {             title: '應急資源管理',             keepAlive: true         }     }, {         path: '/EmergencyMovement/:admin/:Right/:IsAllDesk',         name: 'EmergencyMovement',         component: EmergencyMovement,         meta: {             title: '應急排程管理',             keepAlive: true         }     }, {         path: '/VaccinationSupervision/:admin/:Right/:IsAllDesk',         name: 'VaccinationSupervision',         component: VaccinationSupervision,         meta: {             title: '預防接種督導',             keepAlive: true         }     }] })

3.搭腳手架：

1）新建Header.vue，我這裡放在了app.vue的同級。

我的Header.vue裡面放的是頭部導航選單的內容，程式碼如下：

<template>     <div>         <section class="header">             <div class="header-bg">                 <div class="header-left">                     <div class="t-name">                         <a href="#"><img src="../static/public/static/img/big-logo.png"></a>                     </div>                     <ul class="header-ul" @mouseleave="header_ul_mouseleave">                         <li class="dropdown header-menu" @mouseenter="header_menu_mouseenter" id="4001">                             <router-link to="/index">                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">                                     首頁                                 </a>                             </router-link>                         </li>                         <li class="dropdown header-menu" @mouseenter="header_menu_mouseenter" id="4002">                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">系統基礎資料</a>                             <ul class="dropdown-menu">                                 <li class="" id="40021">                                     <a href="#">                                         <router-link :to="{name:'AddDrug',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">                                             <div class="bg1"><i class="fa fa-list-alt"></i></div>                                             <dd>疫苗接種數報表</dd>                                         </router-link>                                     </a>                                 </li>                                 <li class="" id="40022">                                     <a href="#">                                         <router-link :to="{name:'desk',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">                                             <div class="bg2"><i class="fa fa-table"></i></div>                                             <dd>課桌椅配置管理</dd>                                         </router-link>                                     </a>                                 </li>                             </ul>                         </li>                         <li class="dropdown header-menu" @mouseenter="header_menu_mouseenter" id="4003">                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">疾病風險管理</a>                             <ul class="dropdown-menu">                                 <li class="">                                     <a href="#">                                         <router-link :to="{name:'InfectiousManagement',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">                                             <div class="bg1"><i class="fa fa-send-o"></i></div>                                             <dd>傳染病管理</dd>                                         </router-link>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg2"><i class="fa fa-share-square-o"></i></div>                                         <dd>病媒監測</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg3"><i class="fa fa-transgender-alt"></i></div>                                         <dd>疫情管理</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg4"><i class="fa fa-share-alt"></i></div>                                         <dd>流行病管理</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg5"><i class="fa fa-share"></i></div>                                         <dd>消毒監測</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg6"><i class="fa fa-ambulance"></i></div>                                         <dd>學校幼兒園疫情風險評估系統</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg7"><i class="fa fa-balance-scale"></i></div>                                         <dd>企業健康管理系統</dd>                                     </a>                                 </li>                             </ul>                         </li>                         <li class="dropdown header-menu" @mouseenter="header_menu_mouseenter" id="4004">                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">督導管理</a>                             <ul class="dropdown-menu">                                 <li>                                     <a href="#">                                         <router-link :to="{name:'VaccinationSupervision',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">                                             <div class="bg1"><i class="fa fa-chain"></i></div>                                             <dd>預防接種督導</dd>                                         </router-link>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg2"><i class="fa fa-chain-broken"></i></div>                                         <dd>傳染病督導</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg3"><i class="fa fa-indent"></i></div>                                         <dd>學校衛生督導</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg4"><i class="fa fa-columns"></i></div>                                         <dd>電子健康檔案督導</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg5"><i class="fa fa-adjust"></i></div>                                         <dd>職業衛生督導</dd>                                     </a>                                 </li>                             </ul>                         </li>                         <li class="dropdown header-menu" @mouseenter="header_menu_mouseenter" id="4005">                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">突發公共衛生事件管理</a>                             <ul class="dropdown-menu">                                 <li>                                     <a href="#">                                         <router-link :to="{name:'Monitoring',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">                                             <div class="bg1"><i class="fa fa-krw"></i></div>                                             <dd>監測預警管理</dd>                                         </router-link>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <router-link :to="{name:'EmergencyResource',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">                                             <div class="bg2"><i class="fa fa fa-bell"></i></div>                                             <dd>應急資源管理</dd>                                         </router-link>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <router-link :to="{name:'EmergencyMovement',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">                                             <div class="bg3"><i class="fa fa-bell-slash-o"></i></div>                                             <dd>應急排程管理</dd>                                         </router-link>                                     </a>                                 </li>                             </ul>                         </li>                         <li class="dropdown header-menu" @mouseenter="header_menu_mouseenter" id="4006">                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">決策分析</a>                         </li>                         <li class="dropdown header-menu" @mouseenter="header_menu_mouseenter" id="4007">                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">設定中心</a>                             <ul class="dropdown-menu">                                 <li class="">                                     <a href="#">                                         <div class="bg1"><i class="fa fa-gears"></i></div>                                         <dd>GIS設定</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg2"><i class="fa fa-file-word-o"></i></div>                                         <dd>報表模板設定</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg3"><i class="fa fa-exchange"></i></div>                                         <dd>資料交換介面設定</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg4"><i class="fa fa-table"></i></div>                                         <dd>網格設定</dd>                                     </a>                                 </li>                                 <li class="">                                     <a href="#">                                         <div class="bg5"><i class="fa fa-cog"></i></div>                                         <dd>許可權設定</dd>                                     </a>                                 </li>                             </ul>                         </li>                         <li class="dropdown header-menu" @mouseenter="header_menu_mouseenter" id="4008">                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">地圖服務</a>                         </li>                     </ul>                 </div>                 <div class="header-right">                     <li class="dropdown user-menu" @click="user_menu_click()" v-bind:class="{'open':open,'unopen':!open}">                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">                             <img class="img-circle" src="../static/public/static/img/user.png" alt="User Image">                             <span class="hidden-xs">{{admin}}</span>                         </a>                         <ul class="dropdown-menu">                             <!-- User image -->                             <li class="user-header">                                 <img class="img-circle" src="../static/public/static/img/user.png" alt="User Image">                                 <dl>                                     <dt>{{TopMessage}}</dt>                                     <dd id="timeShow"></dd>                                 </dl>                             </li>                             <!-- Menu Footer-->                             <li class="user-footer">                                 <a href="#">資訊</a>                                 <a href="#" @click="logout">退出</a>                             </li>                         </ul>                     </li>                 </div>             </div>         </section>     </div> </template> <script type="text/javascript" src="../static/public/plugins/jquery/jquery1.12.1.min.js"></script> <script type="text/javascript" src="../static/public/plugins/jquery/jquery.dotdotdot.min.js"></script> <script type="text/javascript" src="../static/public/plugins/layer/layer.js"></script> <script>     export default {         data() {             return {                 open: false, //預設不展開                 admin:this.$route.params.admin,                 Right:this.$route.params.Right,                 IsAllDesk:this.$route.params.IsAllDesk,                 TopMessage: ""             }         },         mounted() {             /*if($(".hidden-xs").text()=="") {                 this.$router.push('/');             }*/             //console.info(this.Right);             //console.info($("ul.header-ul")[0].children);             if(this.Right=="40022"){                 for(var i=1;i<$("ul.header-ul")[0].children.length;i++){                     $("ul.header-ul")[0].children[i].style.display="none";                 }                 var parent=$("#40022")[0].parentNode.parentNode;                 parent.style.display="inline-block";                 $("#40022")[0].parentNode.children[0].style.display="none";                 //console.info(parent.children[0]);             }             /*介面請求*/             this.$http.post('http://140.200.0.117:8088/api/MainPage/Info', {                 "LoginAccount": this.admin             }, {                 header: {},                 emulateJSON: true             }).then((res) => {                 //console.info(res);                 if(res.body.code == "0") {                     this.TopMessage = res.body.result;                 }             }).catch(err => {                 console.info("訪問介面失敗");             })             //日期時間             var t = null;             t = setTimeout(time, 1000); //開始執行             function time() {                 clearTimeout(t); //清除定時器                 var dt = new Date();                 var y = dt.getYear() + 1900;                 var mm = dt.getMonth() + 1;                 var d = dt.getDate();                 var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];                 var day = dt.getDay();                 var h = dt.getHours();                 var m = dt.getMinutes();                 var s = dt.getSeconds();                 if(h < 10) {                     h = "0" + h;                 }                 if(m < 10) {                     m = "0" + m;                 }                 if(s < 10) {                     s = "0" + s;                 }                 document.getElementById("timeShow").innerHTML = y + "年" + mm + "月" + d + "日" + "" + h + ":" + m + ":" + s + "" + "(" + weekday[day] + ")";                 t = setTimeout(time, 1000); //設定定時器，迴圈執行             }         },         methods: {             user_menu_click() {                 this.open = !this.open //右側選單點選切換             },             header_menu_mouseenter: function(e) { //左側選單滑鼠移入移出切換子選單                 $(e.target).addClass("open").siblings().removeClass("open");             },             header_ul_mouseleave() {                 $(".header-menu").removeClass("open");             },             logout() {                 this.$router.push({                     path: '/'                 })             }         }     } </script> <style scoped>     @import url("../static/public/plugins/bootstrap/css/bootstrap.min.css");     @import url("../static/public/plugins/bootstrap/css/font-awesome.min.css");     @import url("../static/public/plugins/bootstrap/css/font-awesome-animation.min.css");     @import url("../static/public/static/css/main.css"); </style> 2）修改App.vue:

<template>     <div id="app">         <el-container v-if="$route.meta.keepAlive">             <el-header>                 <!-- 導航欄 -->                 <header-nav></header-nav>             </el-header>             <el-container>                 <el-main>                     <!-- Body -->                     <router-view></router-view>                 </el-main>             </el-container>         </el-container>         <!-- 登入頁 -->         <router-view v-if="!$route.meta.keepAlive"></router-view>     </div> </template> <script>     import header from '@/Header';     export default {         components: {             headerNav: header         }     } </script>

注：keep-alive 是 Vue 內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染。

在index.js中我對login.vue設定了keep-alive:false//避免渲染頭部導航欄資訊。