No.11 vue-element-admin 学习使用（六）复用component，布局index页面

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

tabs的keep-alive

tab切换的时候，会重新加载，如果不希望每次切换tab都重新加载的话，就用keep-alive包裹起来。

element常见问题： 1.element 所有的原生事件必须添加 .native 修饰符。 2.修改element样式。 由于element的样式的全局引入的，想在views里覆盖它的样式，就不能加scoped，但是不加scoped，就会影响到其它页面的样式，需要给父级加一个class，用命名空间解决这个问题。

多路由复用一个component，可以通过meta区分，例如查看和编辑，共用了一个component，就可以这样来区分。this.$route.meta.isEdit可以获取到meta的数据，然后进行对应的处理就行了。

meta: { title: 'profile', icon: 'user', isEdit: true }

computed: {
  isEdit() {
    return this.$route.meta.isEdit // 根据meta判断
  }
}，
created() {
  if (this.isEdit) { 
    this.fetchData();
  }
}

然后来学习项目布局，顶部导航栏Navbar，左侧导航栏Sidebar，导航TagsView，页面要引入这个布局 在一级路由配置就可以了。

import Layout from '@/layout'
path: '/profile',
component: Layout,

由于使用了vue-router的路由嵌套，修改页面只会影响app-main区域，导航栏区域不受影响。

app-main在@/layout/components/AppMain 先看到Layout中，

从vuex中，取出了这些参数。 然后找到了这些参数是从@/settings中取出的，

顺着找到了setting，配置了layout的各种部分是否显示，（对于后端出身，被迫写前端的野路子前端，第一次见到这样加载配置。。之前一直是hardcode的，感恩的心，以后这样写了）

    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />

修改vuex中的state，实现移动端时关闭侧边栏的功能。

<div :class="{hasTagsView:needTagsView}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<tags-view v-if="needTagsView" />

动态添加class，以及展示tags-view,right-panel，js中是用mapState取vuex中的state,classObj配置样式，然后是一堆css。

至此index页面过完了，接下来要学习一下一下index页面用到的components的细节。