【Vue】解决路由切换，页面不更新的实用方法

前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。

 

一、问题呈现

//路由配置文件代码
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/page/Page1'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/page1', component: Page1 },
    {path: '/page1/:name', component: Page1 }
  ],
  mode:'history'
})

在路由中进行切换结果

 

这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新

 

二、解决方案①

给增加一个不同:key值，这样vue就会识别这是不同的了。

在路由中进行切换结果

 这时候路由就会更新了。不过这也就意味着需要把每个都绑定一个key值。如果我从page1跳到page2不同组件的话，我其实是不用担心组件更新问题的。

 

三、解决方案②

给增加一个不同v-if值，来先摧毁，然后再重新创建起到刷新页面的效果。

 ①因为router-link组件有取消点击事件，这里的.native就是为了触发组件原生标签中的事件。

②this.$nextTick(()=>{})  的用法是等this.routerAlive = false; 触发后再执行 this.routerAlive = true; 从而起到摧毁再创建的效果。

 

四、解决方案②的延伸，在路由内部触发路由的刷新。

方案①，方案②都是通过路由的外部来更新路由的，那如果想从路由内部来更新路由呢？

 

①、当我们点击"跳转到nick,不刷新路由" 时，会发现input的value值并没有改变。

 

②、当我们点击"跳转到nick,并刷新路由" 时，这时候input的value值就已经改变了。

 

 

③、当我们在input中输入随便输入些数值，然后点击"跳转到本身，不刷新路由"，会发现input里面的内容没有刷新。

 

④、点击刷新本身就能触发刷新路由了，是不是很实用。