Vue公共結果頁面實現

我希望寫乙個公共結果頁面，滿足所有模組的結果展示，頁面設計要素如下：

結果圖示type（成功圖示，失敗圖示）

標題title（如：提交成功）

描述descripton（如：您的工單已提交，請等待管理員審核）

內容content（內容不固定，樣式不固定，可自定義）

操作action（提供預設按鈕，可定製返回步數，具備自定義的能力）

我希望的結果頁面應該是這樣的

只有乙個路由頁面，所有人模組跳轉到當前頁面展示結果。

除了type、title和description只傳入字串即可，content和action可擴充套件。

框架採用vue,以下方案都是基於vue的實現思路

動態元件api

resultpage.vue

// 偽**只是表達思路用

v-if="$route.query.type === 'success'"
src='success.png'
/>
返回

跳轉示例

優化：如果要傳遞元件構造器，可以用vuex傳遞引數

方案三是對方案二的優化公升級，最大的難點是，怎麼在路由頁面間傳遞元件

需要了解的api

用法：渲染乙個「元元件」為動態元件。依 is 的值，來決定哪個元件被渲染。

以下是對元件幾個概念的示例

// 返回元件定義

import componentdefinition from './componentdefinition.vue'
// 元件標識id
const componentid = 'component-1' 
// 返回元件構造器
const componentconstructor = vue.component(componentid, 
},template: ``
})// 元件擴充套件返回元件構造器    
const componentconstructor2 = vue.extend(componentdefinition)
// 建立元件例項，並給元件傳遞引數
const componentinstance = new componentconstructor(
}})

1、匯入本地元件

2、對元件進行擴充套件

3、建立元件例項，並傳遞propsdata

但是細心的朋友會發現，動態元件並不支援載入元件例項，元件例項需要手動掛載到頁面才行

// 建立例項

const componentinstance = new componentconstructor(
}})// 掛載例項
componentinstance.$mount('#content');

以上說明了原理，下面放出最終版本實現

}          

import  from '../mutation-types/result'

export default ,
},mutations: ,
},getters: ,
},actions: , obj) ,},}

import vue from 'vue'

import  from 'vuex'
export default ,
methods: ) )
},rendercomponent: function (component, options)  else 
} else 
},},
}

vue 刪除頁面快取 Vue實現頁面快取

在 使用vue開發時，當進行頁面之間的切換時，上乙個頁面將會被銷毀。但是當我們想節省效能以及保留使用者上次操作的結果或避免ajax重複請求的時候，需要把某些特定的頁面快取下來。在vue中，提供了內建元件keep alive 包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和相似，是乙個抽象元...

vue頁面利用keep alive實現頁面快速快取

需求 vue切換頁面時，保留原頁面表單資料，實現快速快取，便於下次利用 方法 基於vue的內建元件keep alive 文件 官方說明 包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和 相似，是乙個抽象元件 它自身不會渲染乙個 dom 元素，也不會出現在父元件鏈中。當元件在 內被切換，它的...

vue 公用頁面引用 vue引入公共元件及js

一 引入全域性js 1.commonfunctions檔案中新建common.js裡面寫上想全域性呼叫的方法 2.main.js中importcommon from commonfunctions common.js 引入檔案 vue.prototype.common common 掛載到原形上 3...