vue项目搭建（由于是初学者，路由及文件的放置有些不规范，一般子组件建议放于components下）_header放view还是components

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//避免渲染头部导航栏信息。