1.公共模块的内容可以放在App.vue中
但是通常登录页面是不需要导航的,那么就需要规避登录页
这时,就可以采用keep-alive结合route.meta则可以选择让需要的页面才展示。修改App.vue,如下:
<template>
<div id="app">
<div v-if="$route.meta.keepAlive">
<headers></headers>
<router-view></router-view>
</div>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<footers></footers>
</div>
</template>
<script>
import headers from "@/views/headers";
import footers from "@/views/footers";
export default {
name: "app",
components: {
headers,
footers
}
};
</script>
<style>
#app {
width: 100%;
min-width: 1200px;
background: white;
/*font-family: "苹方简常规体";*/
}
</style>
2.修改路由 index.js
{
path: '/',
name: 'indexs',
meta:{
title: 'goplastic',
isLogin: true,
keepAlive: true //true显示头部
},
component: indexs
},
{
path:'*',
redirect: '/'
},
{
path: '/login',
name: 'login',
meta:{
title: '登录',
keepAlive: false //false不显示头部
},
component:resolve => require(['@/views/login_wj/login'],resolve),
},