開(kāi)發(fā)過(guò)程遇到了一個(gè)問(wèn)題，就是我的 router-view 里面渲染出來(lái)的組件輸入數(shù)據(jù)之后兰绣，我點(diǎn)擊 路由視圖外邊的導(dǎo)航欄 router-link 按鈕牺弄，可以實(shí)現(xiàn)清除 router-view 里面的數(shù)據(jù)富雅，也就是使組件重新渲染焕襟。
vm.$forceUpdate()
這個(gè)方法可以使當(dāng)前組件調(diào)用這個(gè)方法時(shí)陨收，重新渲染組件。
給 router-view 標(biāo)簽添加 key 屬性
將 key 綁定的值放在狀態(tài)管理容器里面鸵赖，通過(guò) 狀態(tài)管理容器的 mutations 或者 actions 觸發(fā) key 值的變化务漩，即可實(shí)現(xiàn)重新渲染組件的目的。
相關(guān)實(shí)現(xiàn)代碼如下
// store/view.js
const state = {
? viewId: 1
};
const getters = {
? getViewId: state => {
? ? return state.viewId;
? }
};
const mutations = {
? setViewId: (state, payload) => {
? ? state.viewId++;
? }
};
const actions = {
? setViewId: (context, payload) => {
? ? context.commit("setViewId", payload);
? }
};
export default {
? namespaced: true,
? state,
? getters,
? mutations,
? actions
};
放置 router-view 標(biāo)簽的Layout 組件
觸發(fā) viewid它褪，使 router-view 對(duì)應(yīng)的路由組件刷新的地方,比如導(dǎo)航欄組件菲饼。
methods: {
? ? fresh() {
? ? ? ? this.$store.dispatch("view/setViewId")
? ? }
}
