Vue中解决路由切换，页⾯不更新的实⽤⽅法
前⾔：vue-router的切换不同于传统的页⾯的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页⾯切换。这也会导致⼀个问题，就是引⽤相同组件的时候，会导致该组件⽆法更新，也就是我们⼝中的页⾯⽆法更新的问题了。
⼀、问题呈现
在路由中进⾏切换结果
这时候会发现input标签的value值并没有随着路由的改变⽽改变。并没有更新
⼆、解决⽅案①
给<router-view :key="key"></router-view>增加⼀个不同:key值，这样vue就会识别这是不同的<router-view>了。
在路由中进⾏切换结果
这时候路由就会更新了。不过这也就意味着需要把每个<router-view>都绑定⼀个key值。如果我从page1跳到page2不同组件的话，我其实是不⽤担⼼组件更新问题的。
三、解决⽅案②
给<router-view v-if="routerAlive"></router-view>增加⼀个不同v-if值，来先摧毁<router-link>，然后再重新创建<router-link>起到刷新页⾯的效果。
①因为router-link组件有取消点击事件，这⾥的.native就是为了触发组件原⽣标签中的事件。
②this.$nextTick(()=>{})  的⽤法是等uterAlive = false; 触发后再执⾏ uterAlive = true; 从⽽起到摧毁再创建的效果。
四、解决⽅案②的延伸，在路由内部触发路由的刷新。
⽅案①，⽅案②都是通过路由的外部来更新路由的，那如果想从路由内部来更新路由呢？
1 <!-- App.vue根组件代码 -->
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(){
20return {
21        routerAlive:true
22        }
23    },
24    provide(){    //在⽗组件中创建属性
25return {
26                routerRefresh: uterRefresh
27            }
28        },
29    methods:{
30        routerRefresh(){
32this.$nextTick(()=>{
34        });
35        }
36    }
37    }
38 </script>
1 <!-- 组件Page1代码 -->
2 <template>
3    <div class="page-1">
4名字:<input type="text" v-model="value"><br/>
5        <button @click="linkToNick1">跳转到nick，不刷新路由</button>javascript登录注册界面
6        <button @click="linkToNick2">跳转到nick，并刷新路由</button>
7        <br/>
8        <button @click="linkToSelf1">跳转到本⾝，不刷新路由</button>
9        <button @click="linkToSelf2">刷新本⾝</button>
10    </div>
11 </template>
12 <script type="text/javascript">
13    export default {
14    name:'page1',
15    inject:['routerRefresh'],  //在⼦组件中注⼊在⽗组件中出创建的属性
16    mounted(){
17this.value = this.$route.params.name;
18    },
19    data(){
20return {
21            value:''
22        }
23    },
24    methods:{
25        linkToNick1(){
26this.$router.push('/page1/nick');
27        },
28        linkToSelf1(){
29this.$router.push('/page1/freddy');
30        },
31        linkToNick2(){
32this.$router.push('/page1/nick');
34        },
35        linkToSelf2(){
37        }
38    }
39    }
40 </script>
41
42 <style type="text/css">
43    button { margin-top:10px;}
44        button:hover { background:#ff9500; }
45 </style>
①、当我们点击"跳转到nick，不刷新路由" 时，会发现input的value值并没有改变。
②、当我们点击"跳转到nick，并刷新路由" 时，这时候input的value值就已经改变了。
③、当我们在input中输⼊随便输⼊些数值，然后点击"跳转到本⾝，不刷新路由"，会发现input⾥⾯的内容没有刷新。
④、点击刷新本⾝就能触发刷新路由了，是不是很实⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。