一、什麼是無痕重新整理

在不重新整理瀏覽器的情況下，實現頁面的重新整理。

傳統的重新整理頁面方式

window.location.reload()原生 js 提供的方法

this.$router.go(0)vue 路由裡面的一種方法

這兩種方法都可以達到頁面重新整理的目的，簡單粗暴，但是使用者體驗不好，相當於按 F5 重新整理頁面，頁面的重新載入，會有短暫的白屏

二、實現無痕重新整理

先在全域性元件註冊一個方法，用該方法控制 router-view 的顯示與否，然後在子元件呼叫；

用 v-if 控制 <router-view></router-view> 的顯示；

provide：全域性註冊方法；

inject：子元件引用 provide 註冊的方法

APP.vue

<template> <div> <router-viewv-if="isShow"></router-view> </div></template><script>exportdefault{ name:"App", provide(){ return{ reload:this.pageReload }}, data(){ return{ isShow:true }}, methods:{ //重新整理 pageReload(){ this.isShow=false; this.$nextTick(()=>{ this.isShow=true; }) }}};</script>

需要進行無痕重新整理的頁面

<template> <div> <button@click="handleReload()">點選重新整理</button> </div></template><script>exportdefault{ name:"Home", inject:["reload"], methods:{ handleReload(){ this.reload() } }, created(){ console.log(111) }}</script>

三、provide/inject的使用

簡單的來說就是在父元件中通過provider來提供變數，然後在子元件中通過inject來注入變數(這種方式也可以實現元件傳值，父傳子)，provide / inject這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。這個東西很類似於React中的context，實現跨元件傳值

provide 選項應該是：一個物件或返回一個物件的函式

inject 選項應該是：一個字串陣列，或 一個物件，物件的 key 是本地的繫結名

provide

//返回一個物件的函式<template> <div></div></template><script>exportdefault{ name: "App", provide() { return{ title: "alley" };}};</script>//一個物件<template> <div></div></template><script>exportdefault{ name: "App", provide:{ title:"Alley"} };</script>

inject

//一個字串陣列<template> <div> <h2>{{title}}</h2> </div></template><script>exportdefault{ name:"Home", inject:["title"],}</script>//一個物件<template> <div> <h2>{{title}}</h2> </div></template><script>exportdefault{ name:"Home", inject:{ title:{ type:String, default:"巷子" } },}</script>

·END·

溫馨提示