keep-alive detail

src/store/modules/tagsView.js

@@ -1,3 +1,6 @@
+import Vue from 'vue'
+import router from '@/router/index'
+import Layout from '@/views/layout/Layout'
 const tagsView = {
   state: {
     visitedViews: [],
@@ -155,6 +158,32 @@ const tagsView = {
 
     updateVisitedView({ commit }, view) {
       commit('UPDATE_VISITED_VIEW', view)
+    },
+    addPageDetail({ commit, state }, params) {
+      return new Promise((resolve, reject) => {
+        const Detail = params.component
+        const Component = Vue.component(params.name, {
+          components: { Detail },
+          render() {
+            return <Detail />
+          }
+        })
+        router.addRoutes([
+          {
+            path: '',
+            component: Layout,
+            children: [
+              {
+                path: params.path,
+                name: params.name,
+                component: Component,
+                meta: params.meta
+              }
+            ]
+          }
+        ])
+        resolve()
+      })
     }
   }
 }

src/views/example/detail.vue

@@ -0,0 +1,15 @@
+<template>
+  <div style="padding:20px">
+    <div style="margin:10px 0;font-size:13px">{{ $route.meta.title }}</div>
+    <div style="width:200px">
+      <el-input size="mini" type="text"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ExampleDetail'
+}
+</script>

src/views/example/list.vue

@@ -41,11 +41,12 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Actions" width="120">
+      <el-table-column align="center" label="Actions" width="200">
         <template slot-scope="scope">
           <router-link :to="'/example/edit/'+scope.row.id">
             <el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
           </router-link>
+          <el-button size="small" @click="handleDetail(scope.row)">Alive</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -56,12 +57,14 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+import Detail from './detail'
 import { fetchList } from '@/api/article'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 export default {
   name: 'ArticleList',
-  components: { Pagination },
+  components: { Pagination, Detail },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -87,6 +90,9 @@ export default {
     this.getList()
   },
   methods: {
+    ...mapActions([
+      'addPageDetail'
+    ]),
     getList() {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {
@@ -102,6 +108,18 @@ export default {
     handleCurrentChange(val) {
       this.listQuery.page = val
       this.getList()
+    },
+    handleDetail(row) {
+      this.addPageDetail({
+        component: Detail,
+        name: `alive-${row.id}`,
+        path: `/example/alive/${row.id}`,
+        meta: {
+          title: `文章详情-${row.id}`
+        }
+      }).then(() => {
+        this.$router.push({ name: `alive-${row.id}` })
+      })
     }
   }
 }