refactor:add keep-alive && component add name

This commit is contained in:
Pan 2017-10-31 10:49:24 +08:00
parent a932272b8f
commit 1ae31fdd45
28 changed files with 147 additions and 63 deletions

View file

@ -9,11 +9,14 @@ Vue.use(Router)
import Layout from '../views/layout/Layout' import Layout from '../views/layout/Layout'
/** /**
* icon : the icon show in the sidebar * hidden: true if `hidden:true` will not show in the sidebar(default is false)
* hidden : if `hidden:true` will not show in the sidebar * redirect: noredirect if `redirect:noredirect` will no redirct in the levelbar
* title : the name show in submenu and levelbar * meta : {
* redirect : if `redirect:noredirect` will no redirct in the levelbar role: ['admin'] will control the page role
* meta : { role: ['admin'] } will control the page role title: 'title' the name show in submenu and levelbar
icon: 'svg-name' the icon show in the sidebar,
noCache: true if fasle ,the page will no be cached(default is false)
}
**/ **/
export const constantRouterMap = [ export const constantRouterMap = [
@ -119,9 +122,9 @@ export const asyncRouterMap = [
}, },
children: [ children: [
{ path: 'index', component: _import('charts/index'), name: 'chartsIndex', meta: { title: '介绍' }}, { path: 'index', component: _import('charts/index'), name: 'chartsIndex', meta: { title: '介绍' }},
{ path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboard', meta: { title: '键盘图表' }}, { path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboardChart', meta: { title: '键盘图表' }},
{ path: 'keyboard2', component: _import('charts/keyboard2'), name: 'keyboard2', meta: { title: '键盘图表2' }}, { path: 'keyboard2', component: _import('charts/keyboard2'), name: 'keyboardChart2', meta: { title: '键盘图表2' }},
{ path: 'line', component: _import('charts/line'), name: 'line', meta: { title: '折线图' }}, { path: 'line', component: _import('charts/line'), name: 'lineChart', meta: { title: '折线图' }},
{ path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: '混合图表' }} { path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: '混合图表' }}
] ]
}, },
@ -149,12 +152,25 @@ export const asyncRouterMap = [
{ path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: '动态table' }}, { path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: '动态table' }},
{ path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: '拖拽table' }}, { path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: '拖拽table' }},
{ path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'table内编辑' }}, { path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'table内编辑' }},
{ path: 'table', component: _import('example/table/table'), name: 'tableDemo', meta: { title: '综合table' }} { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: '综合table' }}
] ]
}, },
{ path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'Tab' }}, { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'Tab' }}
{ path: 'form/edit', icon: 'form', component: _import('example/form'), name: 'formEdit', meta: { title: '编辑Form', isEdit: true }}, ]
{ path: 'form/create', icon: 'form', component: _import('example/form'), name: 'FormCreate', meta: { title: '创建Form' }} },
{
path: '/form',
component: Layout,
redirect: 'noredirect',
name: 'form',
meta: {
title: '表单',
icon: 'form'
},
children: [
{ path: 'create-form', component: _import('form/create'), name: 'createForm', meta: { title: '创建表单', icon: 'table' }},
{ path: 'edit-form', component: _import('form/edit'), name: 'editForm', meta: { title: '编辑表单', icon: 'table' }}
] ]
}, },
@ -168,8 +184,8 @@ export const asyncRouterMap = [
icon: '404' icon: '404'
}, },
children: [ children: [
{ path: '401', component: _import('errorPage/401'), name: '401', meta: { title: '401' }}, { path: '401', component: _import('errorPage/401'), name: 'page401', meta: { title: '401', noCache: true }},
{ path: '404', component: _import('errorPage/404'), name: '404', meta: { title: '404' }} { path: '404', component: _import('errorPage/404'), name: 'page404', meta: { title: '404', noCache: true }}
] ]
}, },
@ -177,7 +193,7 @@ export const asyncRouterMap = [
path: '/error-log', path: '/error-log',
component: Layout, component: Layout,
redirect: 'noredirect', redirect: 'noredirect',
children: [{ path: 'log', component: _import('errlog/index'), name: 'errorLog', meta: { title: '错误日志', icon: 'bug' }}] children: [{ path: 'log', component: _import('errorLog/index'), name: 'errorLog', meta: { title: '错误日志', icon: 'bug' }}]
}, },
{ {
@ -190,9 +206,9 @@ export const asyncRouterMap = [
icon: 'excel' icon: 'excel'
}, },
children: [ children: [
{ path: 'export-excel', component: _import('excel/index'), name: 'exportExcel', meta: { title: 'export excel' }}, { path: 'export-excel', component: _import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'export excel', noCache: true }},
{ path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'export selected' }}, { path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'export selected', noCache: true }},
{ path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'upload excel' }} { path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'upload excel', noCache: true }}
] ]
}, },
@ -214,7 +230,7 @@ export const asyncRouterMap = [
path: '/clipboard', path: '/clipboard',
component: Layout, component: Layout,
redirect: 'noredirect', redirect: 'noredirect',
children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboard', meta: { title: 'clipboard', icon: 'clipboard' }}] children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboard', icon: 'clipboard' }}]
}, },
{ path: '*', redirect: '/404', hidden: true } { path: '*', redirect: '/404', hidden: true }

View file

@ -1,6 +1,7 @@
const getters = { const getters = {
sidebar: state => state.app.sidebar, sidebar: state => state.app.sidebar,
visitedViews: state => state.app.visitedViews, visitedViews: state => state.app.visitedViews,
cachedViews: state => state.app.cachedViews,
token: state => state.user.token, token: state => state.user.token,
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
name: state => state.user.name, name: state => state.user.name,

View file

@ -5,7 +5,8 @@ const app = {
sidebar: { sidebar: {
opened: !+Cookies.get('sidebarStatus') opened: !+Cookies.get('sidebarStatus')
}, },
visitedViews: [] visitedViews: [],
cachedViews: []
}, },
mutations: { mutations: {
TOGGLE_SIDEBAR: state => { TOGGLE_SIDEBAR: state => {
@ -18,17 +19,28 @@ const app = {
}, },
ADD_VISITED_VIEWS: (state, view) => { ADD_VISITED_VIEWS: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push({ name: view.name, path: view.path }) state.visitedViews.push({
name: view.name,
path: view.path
})
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
}
}, },
DEL_VISITED_VIEWS: (state, view) => { DEL_VISITED_VIEWS: (state, view) => {
let index
for (const [i, v] of state.visitedViews.entries()) { for (const [i, v] of state.visitedViews.entries()) {
if (v.path === view.path) { if (v.path === view.path) {
index = i state.visitedViews.splice(i, 1)
break
}
}
for (const i of state.cachedViews) {
if (i === view.name) {
const index = state.cachedViews.indexOf(i)
state.cachedViews.splice(index, 1)
break break
} }
} }
state.visitedViews.splice(index, 1)
} }
}, },
actions: { actions: {

View file

@ -1,16 +1,17 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<keyboard-chart height='100%' width='100%'></keyboard-chart> <chart height='100%' width='100%'></chart>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import keyboardChart from '@/components/Charts/keyboard' import Chart from '@/components/Charts/keyboard'
export default { export default {
components: { keyboardChart } name: 'keyboardChart',
components: { Chart }
} }
</script> </script>

View file

@ -1,16 +1,17 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<keyboard-chart2 height='100%' width='100%'></keyboard-chart2> <chart height='100%' width='100%'></chart>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import keyboardChart2 from '@/components/Charts/keyboard2' import Chart from '@/components/Charts/keyboard2'
export default { export default {
components: { keyboardChart2 } name: 'keyboardChart2',
components: { Chart }
} }
</script> </script>

View file

@ -1,16 +1,17 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<line-marker height='100%' width='100%'></line-marker> <chart height='100%' width='100%'></chart>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import lineMarker from '@/components/Charts/lineMarker' import Chart from '@/components/Charts/lineMarker'
export default { export default {
components: { lineMarker } name: 'lineChart',
components: { Chart }
} }
</script> </script>

View file

@ -1,16 +1,17 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<mix-chart height='100%' width='100%'></mix-chart> <chart height='100%' width='100%'></chart>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import mixChart from '@/components/Charts/mixChart' import Chart from '@/components/Charts/mixChart'
export default { export default {
components: { mixChart } name: 'mixChart',
components: { Chart }
} }
</script> </script>

View file

@ -18,6 +18,7 @@ import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
export default { export default {
name: 'clipboardDemo',
directives: { directives: {
clipboard clipboard
}, },

View file

@ -14,6 +14,7 @@
import errCode from './errcode' import errCode from './errcode'
export default { export default {
name: 'errorLog',
components: { errCode } components: { errCode }
} }
</script> </script>

View file

@ -30,6 +30,7 @@
import errGif from '@/assets/401_images/401.gif' import errGif from '@/assets/401_images/401.gif'
export default { export default {
name: 'page401',
data() { data() {
return { return {
errGif: errGif + '?' + +new Date(), errGif: errGif + '?' + +new Date(),

View file

@ -23,6 +23,7 @@ import img_404 from '@/assets/404_images/404.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png' import img_404_cloud from '@/assets/404_images/404_cloud.png'
export default { export default {
name: 'page404',
data() { data() {
return { return {
img_404, img_404,

View file

@ -15,7 +15,7 @@
import tabPane from './components/tabPane' import tabPane from './components/tabPane'
export default { export default {
name: 'tabDemo', name: 'tab',
components: { tabPane }, components: { tabPane },
data() { data() {
return { return {

View file

@ -168,7 +168,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
}, {}) }, {})
export default { export default {
name: 'table_demo', name: 'complexTable',
directives: { directives: {
waves waves
}, },

View file

@ -64,7 +64,7 @@ import { fetchList } from '@/api/article'
import Sortable from 'sortablejs' import Sortable from 'sortablejs'
export default { export default {
name: 'drag-table_demo', name: 'dragTable',
data() { data() {
return { return {
list: null, list: null,

View file

@ -13,6 +13,7 @@ import fixedThead from './fixedThead'
import unfixedThead from './unfixedThead' import unfixedThead from './unfixedThead'
export default { export default {
name: 'dynamicTable',
components: { fixedThead, unfixedThead } components: { fixedThead, unfixedThead }
} }
</script> </script>

View file

@ -1,5 +1,18 @@
<template> <template>
<keep-alive> <transition name="fade" mode="out-in">
<router-view></router-view> <keep-alive :include='cachedViews'>
</keep-alive> <router-view></router-view>
</keep-alive>
</transition>
</template> </template>
<script>
export default {
name: 'TableMain',
computed: {
cachedViews() {
return this.$store.state.app.cachedViews
}
}
}
</script>

View file

@ -54,7 +54,7 @@
import { fetchList } from '@/api/article' import { fetchList } from '@/api/article'
export default { export default {
name: 'inline_edit-table_demo', name: 'inlineEditTable',
data() { data() {
return { return {
list: null, list: null,

View file

@ -37,6 +37,7 @@ import { fetchList } from '@/api/article'
import { parseTime } from 'utils' import { parseTime } from 'utils'
export default { export default {
name: 'exportExcel',
data() { data() {
return { return {
list: null, list: null,

View file

@ -38,6 +38,7 @@
import { fetchList } from '@/api/article' import { fetchList } from '@/api/article'
export default { export default {
name: 'selectExcel',
data() { data() {
return { return {
list: null, list: null,

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<upload-excel @on-selected-file='selected'></upload-excel> <upload-excel-component @on-selected-file='selected'></upload-excel-component>
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;"> <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
<el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'> <el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
</el-table-column> </el-table-column>
@ -9,10 +9,11 @@
</template> </template>
<script> <script>
import uploadExcel from 'components/UploadExcel/index.vue' import UploadExcelComponent from 'components/UploadExcel/index.vue'
export default { export default {
components: { uploadExcel }, name: 'uploadExcel',
components: { UploadExcelComponent },
data() { data() {
return { return {
tableData: [], tableData: [],

View file

@ -148,6 +148,12 @@ const defaultForm = {
export default { export default {
name: 'articleDetail', name: 'articleDetail',
components: { Tinymce, MDinput, Upload, Multiselect, Sticky }, components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() { data() {
const validateRequire = (rule, value, callback) => { const validateRequire = (rule, value, callback) => {
if (value === '') { if (value === '') {
@ -196,25 +202,13 @@ export default {
computed: { computed: {
contentShortLength() { contentShortLength() {
return this.postForm.content_short.length return this.postForm.content_short.length
},
isEdit() {
return this.$route.meta.isEdit // meta
// return this.$route.path.indexOf('edit') !== -1 //
} }
}, },
created() { created() {
if (this.isEdit) { if (this.isEdit) {
this.fetchData() this.fetchData()
} } else {
}, this.postForm = Object.assign({}, defaultForm)
watch: {
//
'$route'(to, from) {
if (this.isEdit) {
this.fetchData()
} else {
this.postForm = defaultForm
}
} }
}, },
methods: { methods: {

13
src/views/form/create.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<article-detail :is-edit='false'></article-detail>
</template>
<script>
import ArticleDetail from './components/ArticleDetail'
export default {
name: 'createForm',
components: { ArticleDetail }
}
</script>

13
src/views/form/edit.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<article-detail :is-edit='true'></article-detail>
</template>
<script>
import ArticleDetail from './components/ArticleDetail'
export default {
name: 'editForm',
components: { ArticleDetail }
}
</script>

View file

@ -1,7 +1,7 @@
<template> <template>
<section class="app-main" style="min-height: 100%"> <section class="app-main" style="min-height: 100%">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<keep-alive> <keep-alive :include='cachedViews'>
<router-view></router-view> <router-view></router-view>
</keep-alive> </keep-alive>
</transition> </transition>
@ -10,6 +10,14 @@
<script> <script>
export default { export default {
name: 'AppMain' name: 'AppMain',
computed: {
cachedViews() {
return this.$store.state.app.cachedViews
}
// key() {
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
// }
}
} }
</script> </script>

View file

@ -11,7 +11,7 @@
export default { export default {
computed: { computed: {
visitedViews() { visitedViews() {
return this.$store.state.app.visitedViews.slice(-6) return this.$store.state.app.visitedViews
} }
}, },
mounted() { mounted() {

View file

@ -48,6 +48,7 @@ import { toggleClass } from '@/utils'
import '@/assets/custom-theme/index.css' // element-ui css import '@/assets/custom-theme/index.css' // element-ui css
export default { export default {
name: 'theme',
data() { data() {
return { return {
theme: false, theme: false,

View file

@ -36,6 +36,7 @@
import { fetchList } from '@/api/article' import { fetchList } from '@/api/article'
export default { export default {
name: 'exportZip',
data() { data() {
return { return {
list: null, list: null,