Foreword: vue-router handover is different from traditional page handover. The switching between routes is actually the switching between components, not the real page switching. This will also lead to a problem, that is, when referring to the same component, it will lead to the component can not be updated, that is, the page in our mouth can not be updated.
I. Problem Presentation
Switching results in routing
At this time, it will be found that the value of the input tag does not change with the change of routing. No updates
II. Solutions
Add a different key value to <router-view:key="key"> </router-view> so that vue recognizes that this is a different <router-view>.
Switching results in routing
At this point, the routing will be updated. But this also means that each < router-view > needs to be bound to a key value. If I jump from page1 to page2 with different components, I really don't have to worry about component updates.
3. Solutions 2
Add a different V-IF value to <router-view v-if="router Alive"> </router-view> to destroy <router-link> and then recreate <router-link> to refresh the page.
Because router-link components have cancel click events, here. native is to trigger events in the component's native tag.
(2) The usage of this. $nextTick (()=> {}) is to wait for this.routerAlive = false; to execute this.routerAlive = true after triggering; thus to destroy and recreate.
Fourth, the extension of solution 2 triggers the refresh of routing within the routing.
Scheme 1, Scheme 2 updates the routing through the outside of the routing. What if you want to update the routing from the inside of the routing?
1 <!-- App.vue Root Component Code --> 2 <template> 3 <div class="app"> 4 <div class="slide"> 5 <ul> 6 <li><router-link to="/page1/freddy" >freddy</router-link></li> 7 <li><router-link to="/page1/nick" >nick</router-link></li> 8 <li><router-link to="/page1/mike" >mike</router-link></li> 9 </ul> 10 </div> 11 <div class="content"> 12 <router-view v-if="routerAlive"></router-view> 13 </div> 14 </div> 15 </template> 16 17 <script> 18 export default{ 19 data(){ 20 return { 21 routerAlive:true 22 } 23 }, 24 provide(){ //Create properties in parent components 25 return { 26 routerRefresh: this.routerRefresh 27 } 28 }, 29 methods:{ 30 routerRefresh(){ 31 this.routerAlive = false; 32 this.$nextTick(()=>{ 33 this.routerAlive = true; 34 }); 35 } 36 } 37 } 38 </script>
1 <!-- assembly Page1 Code --> 2 <template> 3 <div class="page-1"> 4 Name:<input type="text" v-model="value"><br/> 5 <button @click="linkToNick1">Jump To nick,No refresh routing</button> 6 <button @click="linkToNick2">Jump To nick,And refresh routing</button> 7 <br/> 8 <button @click="linkToSelf1">Jump to itself,No refresh routing</button> 9 <button @click="linkToSelf2">Refresh itself</button> 10 </div> 11 </template> 12 <script type="text/javascript"> 13 export default { 14 name:'page1', 15 inject:['routerRefresh'], //Injecting attributes created in parent components into child components 16 mounted(){ 17 this.value = this.$route.params.name; 18 }, 19 data(){ 20 return { 21 value:'' 22 } 23 }, 24 methods:{ 25 linkToNick1(){ 26 this.$router.push('/page1/nick'); 27 }, 28 linkToSelf1(){ 29 this.$router.push('/page1/freddy'); 30 }, 31 linkToNick2(){ 32 this.$router.push('/page1/nick'); 33 this.routerRefresh(); 34 }, 35 linkToSelf2(){ 36 this.routerRefresh(); 37 } 38 } 39 } 40 </script> 41 42 <style type="text/css"> 43 button { margin-top:10px;} 44 button:hover { background:#ff9500; } 45 </style>
(1) When we click "jump to nick, do not refresh the routing", we will find that the value of input has not changed.
(2) When we click "jump to nick and refresh the routing", the value of input has changed.
(3) When we enter some values randomly in the input, and then click "jump to itself, do not refresh the routing", we will find that the contents of the input are not refreshed.
(4) Click refresh itself can trigger refresh routing, is it very practical?
