vue-element-admin 内部页面增加版权信息-工具盒子

在使用基于 vue 和 element-ui 实现的后台前端解决方案模板 vue-element-admin 开发后台管理平台时，有时需要在每个页面的底部加上公司版权信息，其实这个挺简单的，具体实现方式如下：

步骤1：创建组件

在文件夹 @/src/layout/components 下创建 CopyRight 文件夹，并在其下创建 index.vue 文件，具体代码如下：

<template>
  <p
    style="display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.6;
    margin: 20px 0;"
  >
    © 2015-2022
    <el-link
      type="primary"
      href="https://www.****.com/"
      target="_blank"
      style="margin: 0 5px;"
    >********有限公司</el-link>
    版权所有
  </p>
</template>

步骤2：引入、注册并使用组件

修改 @/src/layout/components/AppMain.vue 文件。

修改后的视图代码：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in" @before-leave="isEnter = false" @after-enter="isEnter = true">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
    <copy-right v-if="isEnter" />
  </section>
</template>

修改后的 js 代码：

<script>
import CopyRight from './CopyRight'
`export default {
name: 'AppMain',
components: {
CopyRight
},
data() {
return {
isEnter: true
}
},
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
}
}
}
</script>`

由于框架引入了路由切换过渡动画 transition，因此需要对引用的 copy-right 组件进行处理，否则会出现闪现。

知识点：