feature:路由缓存

src/assets/css/main.css

@@ -84,11 +84,11 @@ a {
 
 .move-enter-active,
 .move-leave-active {
-    transition: opacity .5s;
+    transition: opacity .1s ease;
 }
 
-.move-enter,
-.move-leave {
+.move-enter-from,
+.move-leave-to {
     opacity: 0;
 }
 

src/components/Tags.vue

@@ -80,6 +80,7 @@ export default {
                     this.$store.commit("delTagsItem", { index: 0 });
                 }
                 this.$store.commit("setTagsItem", {
+                    name: route.name,
                     title: route.meta.title,
                     path: route.fullPath
                 });

src/router/index.js

@@ -12,7 +12,7 @@ const routes = [
         children: [
             {
                 path: "/dashboard",
-                name: "Dashboard",
+                name: "dashboard",
                 meta: {
                     title: '系统首页'
                 },
@@ -21,7 +21,7 @@ const routes = [
                 "../views/Dashboard.vue")
             }, {
                 path: "/table",
-                name: "BaseTable",
+                name: "basetable",
                 meta: {
                     title: '表格'
                 },
@@ -30,7 +30,7 @@ const routes = [
                 "../views/BaseTable.vue")
             }, {
                 path: "/charts",
-                name: "BaseCharts",
+                name: "basecharts",
                 meta: {
                     title: '图表'
                 },
@@ -39,7 +39,7 @@ const routes = [
                 "../views/BaseCharts.vue")
             }, {
                 path: "/form",
-                name: "BaseForm",
+                name: "baseform",
                 meta: {
                     title: '表单'
                 },
@@ -48,7 +48,7 @@ const routes = [
                 "../views/BaseForm.vue")
             }, {
                 path: "/tabs",
-                name: "Tabs",
+                name: "tabs",
                 meta: {
                     title: 'tab标签'
                 },
@@ -57,7 +57,7 @@ const routes = [
                 "../views/Tabs.vue")
             }, {
                 path: "/donate",
-                name: "Donate",
+                name: "donate",
                 meta: {
                     title: '鼓励作者'
                 },
@@ -66,7 +66,7 @@ const routes = [
                 "../views/Donate.vue")
             }, {
                 path: "/permission",
-                name: "Permission",
+                name: "permission",
                 meta: {
                     title: '权限管理',
                     permission: true
@@ -76,7 +76,7 @@ const routes = [
                 "../views/Permission.vue")
             }, {
                 path: "/i18n",
-                name: "I18n",
+                name: "i18n",
                 meta: {
                     title: '国际化语言'
                 },
@@ -85,7 +85,7 @@ const routes = [
                 "../views/I18n.vue")
             }, {
                 path: "/upload",
-                name: "Upload",
+                name: "upload",
                 meta: {
                     title: '上传插件'
                 },
@@ -94,7 +94,7 @@ const routes = [
                 "../views/Upload.vue")
             }, {
                 path: "/icon",
-                name: "Icon",
+                name: "icon",
                 meta: {
                     title: '自定义图标'
                 },

src/views/BaseTable.vue

@@ -14,35 +14,13 @@
                     icon="el-icon-delete"
                     class="handle-del mr10"
                     @click="delAllSelection"
-                    >批量删除</el-button
-                >
-                <el-select
-                    v-model="query.address"
-                    placeholder="地址"
-                    class="handle-select mr10"
-                >
-                    <el-option
-                        key="1"
-                        label="广东省"
-                        value="广东省"
-                    ></el-option>
-                    <el-option
-                        key="2"
-                        label="湖南省"
-                        value="湖南省"
-                    ></el-option>
+                >批量删除</el-button>
+                <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
+                    <el-option key="1" label="广东省" value="广东省"></el-option>
+                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                 </el-select>
-                <el-input
-                    v-model="query.name"
-                    placeholder="用户名"
-                    class="handle-input mr10"
-                ></el-input>
-                <el-button
-                    type="primary"
-                    icon="el-icon-search"
-                    @click="handleSearch"
-                    >搜索</el-button
-                >
+                <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
+                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
             </div>
             <el-table
                 :data="tableData"
@@ -52,22 +30,11 @@
                 header-cell-class-name="table-header"
                 @selection-change="handleSelectionChange"
             >
-                <el-table-column
-                    type="selection"
-                    width="55"
-                    align="center"
-                ></el-table-column>
-                <el-table-column
-                    prop="id"
-                    label="ID"
-                    width="55"
-                    align="center"
-                ></el-table-column>
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
+                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                 <el-table-column prop="name" label="用户名"></el-table-column>
                 <el-table-column label="账户余额">
-                    <template #default="scope"
-                        >￥{{ scope.row.money }}</template
-                    >
+                    <template #default="scope">￥{{ scope.row.money }}</template>
                 </el-table-column>
                 <el-table-column label="头像(查看大图)" align="center">
                     <template #default="scope">
@@ -89,8 +56,7 @@
                                     ? 'danger'
                                     : ''
                             "
-                            >{{ scope.row.state }}</el-tag
-                        >
+                        >{{ scope.row.state }}</el-tag>
                     </template>
                 </el-table-column>
 
@@ -101,15 +67,13 @@
                             type="text"
                             icon="el-icon-edit"
                             @click="handleEdit(scope.$index, scope.row)"
-                            >编辑</el-button
-                        >
+                        >编辑</el-button>
                         <el-button
                             type="text"
                             icon="el-icon-delete"
                             class="red"
                             @click="handleDelete(scope.$index, scope.row)"
-                            >删除</el-button
-                        >
+                        >删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -138,9 +102,7 @@
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="editVisible = false">取 消</el-button>
-                    <el-button type="primary" @click="saveEdit"
-                        >确 定</el-button
-                    >
+                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                 </span>
             </template>
         </el-dialog>
@@ -150,13 +112,14 @@
 <script>
 import { fetchData } from "../api/index";
 export default {
+    name: "basetable",
     data() {
         return {
             query: {
                 address: "",
                 name: "",
                 pageIndex: 1,
-                pageSize: 10,
+                pageSize: 10
             },
             tableData: [],
             multipleSelection: [],
@@ -165,7 +128,7 @@ export default {
             pageTotal: 0,
             form: {},
             idx: -1,
-            id: -1,
+            id: -1
         };
     },
     created() {
@@ -174,7 +137,7 @@ export default {
     methods: {
         // 获取 easy-mock 的模拟数据
         getData() {
-            fetchData(this.query).then((res) => {
+            fetchData(this.query).then(res => {
                 console.log(res);
                 this.tableData = res.list;
                 this.pageTotal = res.pageTotal || 50;
@@ -189,7 +152,7 @@ export default {
         handleDelete(index) {
             // 二次确认删除
             this.$confirm("确定要删除吗？", "提示", {
-                type: "warning",
+                type: "warning"
             })
                 .then(() => {
                     this.$message.success("删除成功");
@@ -227,8 +190,8 @@ export default {
         handlePageChange(val) {
             this.$set(this.query, "pageIndex", val);
             this.getData();
-        },
-    },
+        }
+    }
 };
 </script>
 

src/views/Dashboard.vue

@@ -4,11 +4,7 @@
             <el-col :span="8">
                 <el-card shadow="hover" class="mgb20" style="height:252px;">
                     <div class="user-info">
-                        <img
-                            src="../assets/img/img.jpg"
-                            class="user-avator"
-                            alt
-                        />
+                        <img src="../assets/img/img.jpg" class="user-avator" alt />
                         <div class="user-info-cont">
                             <div class="user-info-name">{{ name }}</div>
                             <div>{{ role }}</div>
@@ -30,29 +26,16 @@
                         </div>
                     </template>
                     Vue
-                    <el-progress
-                        :percentage="71.3"
-                        color="#42b983"
-                    ></el-progress
-                    >JavaScript
-                    <el-progress
-                        :percentage="24.1"
-                        color="#f1e05a"
-                    ></el-progress
-                    >CSS <el-progress :percentage="13.7"></el-progress>HTML
-                    <el-progress
-                        :percentage="5.9"
-                        color="#f56c6c"
-                    ></el-progress>
+                    <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
+                    <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
+                    <el-progress :percentage="13.7"></el-progress>HTML
+                    <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
                 </el-card>
             </el-col>
             <el-col :span="16">
                 <el-row :gutter="20" class="mgb20">
                     <el-col :span="8">
-                        <el-card
-                            shadow="hover"
-                            :body-style="{ padding: '0px' }"
-                        >
+                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                             <div class="grid-content grid-con-1">
                                 <i class="el-icon-user-solid grid-con-icon"></i>
                                 <div class="grid-cont-right">
@@ -63,14 +46,9 @@
                         </el-card>
                     </el-col>
                     <el-col :span="8">
-                        <el-card
-                            shadow="hover"
-                            :body-style="{ padding: '0px' }"
-                        >
+                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                             <div class="grid-content grid-con-2">
-                                <i
-                                    class="el-icon-message-solid grid-con-icon"
-                                ></i>
+                                <i class="el-icon-message-solid grid-con-icon"></i>
                                 <div class="grid-cont-right">
                                     <div class="grid-num">321</div>
                                     <div>系统消息</div>
@@ -79,10 +57,7 @@
                         </el-card>
                     </el-col>
                     <el-col :span="8">
-                        <el-card
-                            shadow="hover"
-                            :body-style="{ padding: '0px' }"
-                        >
+                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                             <div class="grid-content grid-con-3">
                                 <i class="el-icon-s-goods grid-con-icon"></i>
                                 <div class="grid-cont-right">
@@ -97,24 +72,14 @@
                     <template #header>
                         <div class="clearfix">
                             <span>待办事项</span>
-                            <el-button
-                                style="float: right; padding: 3px 0"
-                                type="text"
-                                >添加</el-button
-                            >
+                            <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                         </div>
                     </template>
 
-                    <el-table
-                        :show-header="false"
-                        :data="todoList"
-                        style="width:100%;"
-                    >
+                    <el-table :show-header="false" :data="todoList" style="width:100%;">
                         <el-table-column width="40">
                             <template #default="scope">
-                                <el-checkbox
-                                    v-model="scope.row.status"
-                                ></el-checkbox>
+                                <el-checkbox v-model="scope.row.status"></el-checkbox>
                             </template>
                         </el-table-column>
                         <el-table-column>
@@ -124,9 +89,7 @@
                                     :class="{
                                         'todo-item-del': scope.row.status,
                                     }"
-                                >
-                                    {{ scope.row.title }}
-                                </div>
+                                >{{ scope.row.title }}</div>
                             </template>
                         </el-table-column>
                         <el-table-column width="60">
@@ -142,22 +105,12 @@
         <el-row :gutter="20">
             <el-col :span="12">
                 <el-card shadow="hover">
-                    <schart
-                        ref="bar"
-                        class="schart"
-                        canvasId="bar"
-                        :options="options"
-                    ></schart>
+                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                 </el-card>
             </el-col>
             <el-col :span="12">
                 <el-card shadow="hover">
-                    <schart
-                        ref="line"
-                        class="schart"
-                        canvasId="line"
-                        :options="options2"
-                    ></schart>
+                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
                 </el-card>
             </el-col>
         </el-row>
@@ -166,7 +119,6 @@
 
 <script>
 import Schart from "vue-schart";
-// import bus from '../common/bus';
 export default {
     name: "dashboard",
     data() {
@@ -175,111 +127,111 @@ export default {
             todoList: [
                 {
                     title: "今天要修复100个bug",
-                    status: false,
+                    status: false
                 },
                 {
                     title: "今天要修复100个bug",
-                    status: false,
+                    status: false
                 },
                 {
                     title: "今天要写100行代码加几个bug吧",
-                    status: false,
+                    status: false
                 },
                 {
                     title: "今天要修复100个bug",
-                    status: false,
+                    status: false
                 },
                 {
                     title: "今天要修复100个bug",
-                    status: true,
+                    status: true
                 },
                 {
                     title: "今天要写100行代码加几个bug吧",
-                    status: true,
-                },
+                    status: true
+                }
             ],
             data: [
                 {
                     name: "2018/09/04",
-                    value: 1083,
+                    value: 1083
                 },
                 {
                     name: "2018/09/05",
-                    value: 941,
+                    value: 941
                 },
                 {
                     name: "2018/09/06",
-                    value: 1139,
+                    value: 1139
                 },
                 {
                     name: "2018/09/07",
-                    value: 816,
+                    value: 816
                 },
                 {
                     name: "2018/09/08",
-                    value: 327,
+                    value: 327
                 },
                 {
                     name: "2018/09/09",
-                    value: 228,
+                    value: 228
                 },
                 {
                     name: "2018/09/10",
-                    value: 1065,
-                },
+                    value: 1065
+                }
             ],
             options: {
                 type: "bar",
                 title: {
-                    text: "最近一周各品类销售图",
+                    text: "最近一周各品类销售图"
                 },
                 xRorate: 25,
                 labels: ["周一", "周二", "周三", "周四", "周五"],
                 datasets: [
                     {
                         label: "家电",
-                        data: [234, 278, 270, 190, 230],
+                        data: [234, 278, 270, 190, 230]
                     },
                     {
                         label: "百货",
-                        data: [164, 178, 190, 135, 160],
+                        data: [164, 178, 190, 135, 160]
                     },
                     {
                         label: "食品",
-                        data: [144, 198, 150, 235, 120],
-                    },
-                ],
+                        data: [144, 198, 150, 235, 120]
+                    }
+                ]
             },
             options2: {
                 type: "line",
                 title: {
-                    text: "最近几个月各品类销售趋势图",
+                    text: "最近几个月各品类销售趋势图"
                 },
                 labels: ["6月", "7月", "8月", "9月", "10月"],
                 datasets: [
                     {
                         label: "家电",
-                        data: [234, 278, 270, 190, 230],
+                        data: [234, 278, 270, 190, 230]
                     },
                     {
                         label: "百货",
-                        data: [164, 178, 150, 135, 160],
+                        data: [164, 178, 150, 135, 160]
                     },
                     {
                         label: "食品",
-                        data: [74, 118, 200, 235, 90],
-                    },
-                ],
-            },
+                        data: [74, 118, 200, 235, 90]
+                    }
+                ]
+            }
         };
     },
     components: {
-        Schart,
+        Schart
     },
     computed: {
         role() {
             return this.name === "admin" ? "超级管理员" : "普通用户";
-        },
+        }
     },
 
     methods: {
@@ -290,22 +242,8 @@ export default {
                 item.name = `${date.getFullYear()}/${date.getMonth() +
                     1}/${date.getDate()}`;
             });
-        },
-        // handleListener() {
-        //     bus.$on('collapse', this.handleBus);
-        //     // 调用renderChart方法对图表进行重新渲染
-        //     window.addEventListener('resize', this.renderChart);
-        // },
-        // handleBus(msg) {
-        //     setTimeout(() => {
-        //         this.renderChart();
-        //     }, 200);
-        // },
-        // renderChart() {
-        //     this.$refs.bar.renderChart();
-        //     this.$refs.line.renderChart();
-        // }
-    },
+        }
+    }
 };
 </script>
 

src/views/Donate.vue

@@ -17,7 +17,9 @@
 </template>
 
 <script>
-export default {};
+export default {
+    name: "donate"
+};
 </script>
 
 <style>

src/views/Home.vue

@@ -2,16 +2,16 @@
     <div class="about">
         <v-header />
         <v-sidebar />
-        <div class="content-box" :class="{'content-collapse':collapse}">
+        <div class="content-box" :class="{ 'content-collapse': collapse }">
             <v-tags></v-tags>
             <div class="content">
-                    <!-- <keep-alive :include="tagsList"> -->
-                    <router-view v-slot="{ Component }">
-                <transition name="move" mode="out-in">
-<component :is="Component" />
-                </transition>
-                    </router-view>
-                    <!-- </keep-alive> -->
+                <router-view v-slot="{ Component }">
+                    <transition name="move" mode="out-in">
+                        <keep-alive :include="tagsList">
+                            <component :is="Component" />
+                        </keep-alive>
+                    </transition>
+                </router-view>
                 <!-- <el-backtop target=".content"></el-backtop> -->
             </div>
         </div>
@@ -27,10 +27,13 @@ export default {
         vSidebar,
         vTags
     },
-    computed:{
-        collapse(){
-            return this.$store.state.collapse
+    computed: {
+        tagsList() {
+            return this.$store.state.tagsList.map(item => item.name);
+        },
+        collapse() {
+            return this.$store.state.collapse;
         }
     }
 };
-</script>
+</script>

src/views/I18n.vue

@@ -2,14 +2,20 @@
     <section class="main">
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-global"></i>
+                    {{$t('i18n.breadcrumb')}}
+                </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="container">
             <span>{{$t('i18n.tips')}}</span>
-            <el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh-cn'?'en':'zh-cn';">{{$t('i18n.btn')}}</el-button>
+            <el-button
+                type="primary"
+                @click="$i18n.locale = $i18n.locale === 'zh-cn'?'en':'zh-cn';"
+            >{{$t('i18n.btn')}}</el-button>
             <div class="list">
-            <h2>{{$t('i18n.title1')}}</h2>
+                <h2>{{$t('i18n.title1')}}</h2>
                 <p>{{$t('i18n.p1')}}</p>
                 <p>{{$t('i18n.p2')}}</p>
                 <p>{{$t('i18n.p3')}}</p>
@@ -20,14 +26,15 @@
 
 <script>
 export default {
-}
+    name: "i18n"
+};
 </script>
 
 <style scoped>
-.list{
+.list {
     padding: 30px 0;
 }
-.list p{
+.list p {
     margin-bottom: 20px;
 }
 </style>

src/views/Icon.vue

@@ -2,14 +2,16 @@
     <div>
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-emoji"></i> 自定义图标
+                </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="container">
             <h2>使用方法</h2>
-            <p style="line-height: 50px;">
-                直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）
-            </p>
+            <p
+                style="line-height: 50px;"
+            >直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）</p>
             <p class="example-p">
                 <i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
                 <span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
@@ -22,10 +24,16 @@
                 <i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
                 <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
             </p>
-            <br>
+            <br />
             <h2>图标</h2>
             <div class="search-box">
-                <el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
+                <el-input
+                    class="search"
+                    size="large"
+                    v-model="keyword"
+                    clearable
+                    placeholder="请输入图标名称"
+                ></el-input>
             </div>
             <ul>
                 <li class="icon-li" v-for="(item,index) in list" :key="index">
@@ -36,177 +44,178 @@
                 </li>
             </ul>
         </div>
-
     </div>
 </template>
 
 <script>
-    export default {
-        data: function(){
-            return {
-                keyword: '',
-                iconList: [
-                    'attentionforbid',
-                    'attentionforbidfill',
-                    'attention',
-                    'attentionfill',
-                    'tag',
-                    'tagfill',
-                    'people',
-                    'peoplefill',
-                    'notice',
-                    'noticefill',
-                    'mobile',
-                    'mobilefill',
-                    'voice',
-                    'voicefill',
-                    'unlock',
-                    'lock',
-                    'home',
-                    'homefill',
-                    'delete',
-                    'deletefill',
-                    'notification',
-                    'notificationfill',
-                    'notificationforbidfill',
-                    'like',
-                    'likefill',
-                    'comment',
-                    'commentfill',
-                    'camera',
-                    'camerafill',
-                    'warn',
-                    'warnfill',
-                    'time',
-                    'timefill',
-                    'location',
-                    'locationfill',
-                    'favor',
-                    'favorfill',
-                    'skin',
-                    'skinfill',
-                    'news',
-                    'newsfill',
-                    'record',
-                    'recordfill',
-                    'emoji',
-                    'emojifill',
-                    'message',
-                    'messagefill',
-                    'goods',
-                    'goodsfill',
-                    'crown',
-                    'crownfill',
-                    'move',
-                    'add',
-                    'hot',
-                    'hotfill',
-                    'service',
-                    'servicefill',
-                    'present',
-                    'presentfill',
-                    'pic',
-                    'picfill',
-                    'rank',
-                    'rankfill',
-                    'male',
-                    'female',
-                    'down',
-                    'top',
-                    'recharge',
-                    'rechargefill',
-                    'forward',
-                    'forwardfill',
-                    'info',
-                    'infofill',
-                    'redpacket',
-                    'redpacket_fill',
-                    'roundadd',
-                    'roundaddfill',
-                    'friendadd',
-                    'friendaddfill',
-                    'cart',
-                    'cartfill',
-                    'more',
-                    'moreandroid',
-                    'back',
-                    'right',
-                    'shop',
-                    'shopfill',
-                    'question',
-                    'questionfill',
-                    'roundclose',
-                    'roundclosefill',
-                    'roundcheck',
-                    'roundcheckfill',
-                    'global',
-                    'mail',
-                    'punch',
-                    'exit',
-                    'upload',
-                    'read',
-                    'file',
-                    'link',
-                    'full',
-                    'group',
-                    'friend',
-                    'profile',
-                    'addressbook',
-                    'calendar',
-                    'text',
-                    'copy',
-                    'share',
-                    'wifi',
-                    'vipcard',
-                    'weibo',
-                    'remind',
-                    'refresh',
-                    'filter',
-                    'settings',
-                    'scan',
-                    'qrcode',
-                    'cascades',
-                    'apps',
-                    'sort',
-                    'searchlist',
-                    'search',
-                    'edit'
-                ]
-            }
-        },
-        computed: {
-            list(){
-                return this.iconList.filter((item) => {
-                    return item.indexOf(this.keyword) !== -1;
-                })
-            }
+export default {
+    name: "icon",
+    data() {
+        return {
+            keyword: "",
+            iconList: [
+                "attentionforbid",
+                "attentionforbidfill",
+                "attention",
+                "attentionfill",
+                "tag",
+                "tagfill",
+                "people",
+                "peoplefill",
+                "notice",
+                "noticefill",
+                "mobile",
+                "mobilefill",
+                "voice",
+                "voicefill",
+                "unlock",
+                "lock",
+                "home",
+                "homefill",
+                "delete",
+                "deletefill",
+                "notification",
+                "notificationfill",
+                "notificationforbidfill",
+                "like",
+                "likefill",
+                "comment",
+                "commentfill",
+                "camera",
+                "camerafill",
+                "warn",
+                "warnfill",
+                "time",
+                "timefill",
+                "location",
+                "locationfill",
+                "favor",
+                "favorfill",
+                "skin",
+                "skinfill",
+                "news",
+                "newsfill",
+                "record",
+                "recordfill",
+                "emoji",
+                "emojifill",
+                "message",
+                "messagefill",
+                "goods",
+                "goodsfill",
+                "crown",
+                "crownfill",
+                "move",
+                "add",
+                "hot",
+                "hotfill",
+                "service",
+                "servicefill",
+                "present",
+                "presentfill",
+                "pic",
+                "picfill",
+                "rank",
+                "rankfill",
+                "male",
+                "female",
+                "down",
+                "top",
+                "recharge",
+                "rechargefill",
+                "forward",
+                "forwardfill",
+                "info",
+                "infofill",
+                "redpacket",
+                "redpacket_fill",
+                "roundadd",
+                "roundaddfill",
+                "friendadd",
+                "friendaddfill",
+                "cart",
+                "cartfill",
+                "more",
+                "moreandroid",
+                "back",
+                "right",
+                "shop",
+                "shopfill",
+                "question",
+                "questionfill",
+                "roundclose",
+                "roundclosefill",
+                "roundcheck",
+                "roundcheckfill",
+                "global",
+                "mail",
+                "punch",
+                "exit",
+                "upload",
+                "read",
+                "file",
+                "link",
+                "full",
+                "group",
+                "friend",
+                "profile",
+                "addressbook",
+                "calendar",
+                "text",
+                "copy",
+                "share",
+                "wifi",
+                "vipcard",
+                "weibo",
+                "remind",
+                "refresh",
+                "filter",
+                "settings",
+                "scan",
+                "qrcode",
+                "cascades",
+                "apps",
+                "sort",
+                "searchlist",
+                "search",
+                "edit"
+            ]
+        };
+    },
+    computed: {
+        list() {
+            return this.iconList.filter(item => {
+                return item.indexOf(this.keyword) !== -1;
+            });
         }
     }
+};
 </script>
 
 <style scoped>
-.example-p{
+.example-p {
     height: 45px;
     display: flex;
     align-items: center;
 }
-.search-box{
+.search-box {
     text-align: center;
     margin-top: 10px;
 }
-.search{
+.search {
     width: 300px;
 }
-ul,li{
+ul,
+li {
     list-style: none;
 }
-.icon-li{
+.icon-li {
     display: inline-block;
     padding: 10px;
     width: 120px;
     height: 120px;
 }
-.icon-li-content{
+.icon-li-content {
     display: flex;
     height: 100%;
     flex-direction: column;
@@ -214,11 +223,11 @@ ul,li{
     justify-content: center;
     cursor: pointer;
 }
-.icon-li-content i{
+.icon-li-content i {
     font-size: 36px;
     color: #606266;
 }
-.icon-li-content span{
+.icon-li-content span {
     margin-top: 10px;
     color: #787878;
 }

src/views/Permission.vue

@@ -2,37 +2,39 @@
     <div>
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限测试</el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-warn"></i> 权限测试
+                </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="container">
             <h1>管理员权限页面</h1>
             <p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到403页面，重新用管理员账号登录才有权限。</p>
-            <p>想尝试一下，请<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。</p>
+            <p>
+                想尝试一下，请
+                <router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。
+            </p>
         </div>
-
     </div>
 </template>
 
 <script>
-    export default {
-        data: function(){
-            return {}
-        }
-    }
+export default {
+    name: "permission"
+};
 </script>
 
 <style scoped>
-h1{
+h1 {
     text-align: center;
     margin: 30px 0;
 }
-p{
+p {
     line-height: 30px;
     margin-bottom: 10px;
     text-indent: 2em;
 }
-.logout{
-    color: #409EFF;
+.logout {
+    color: #409eff;
 }
 </style>

src/views/Upload.vue

@@ -81,6 +81,7 @@
 import VueCropper from "vue-cropperjs";
 import "cropperjs/dist/cropper.css";
 export default {
+    name: "upload",
     data() {
         return {
             defaultSrc: require("../assets/img/img.jpg"),