vue使用keepAlive之后页面空白白屏？route和router什么区别呢？

问题描述：

vue使用keepAlive之后页面空白，报错：TypeError: Cannot read property 'keepAlive' of undefined。。。

为了实现页面跳转之后，返回还显示用户看过的页面/筛选过的数据，就在项目中加入了keepAlive，没想到第一次使用就遇到了，度娘都没有发生过的bug：“TypeError: Cannot read property 'keepAlive' of undefined”......

keepAlive全局使用方法：

1.app.vue加入

<keep-alive>
      <router-view  v-if="$router.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$router.meta.keepAlive"></router-view>

2.路由配置页面，每个路由根据需要配置是否开启缓存。如下如图：

meta: {
        keepAlive: false
}

3.路由配置假如”滚动行为“：scrollBehavior，保证后退能返回指定位置

scrollBehavior (to, from, position) {
    if (position || typeof position === 'undefined') {
      return position
    } else {
      return { x: 0, y: 0 }
    }
}

好了，我就这样期待缓存成功！却发现了上面的bug，页面显示空白！！！

打印了下这个路由参数meta，发现不存在，直接打印当前页面路由如下：

mounted () {
    console.log(this.$router)
}

路由里面也没有meta参数？去哪了，重启项目，依旧报错！！

解决白屏办法

然后页面切换的时候，发现监听路由变化用的是”this.$route“，咦，重大发现，没有字母r
修改了上面的第一步：

<keep-alive>
      <router-view  v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

回到页面就发现正常了，缓存也开启成功了！就是路由写法错误导致的，那么route和router什么区别呢？

route和router什么区别

我又打印了一下$this.route，这个真的可以获取meta的参数信息，如下：

$route介绍

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

常用获取路由信息的方法

• $route.path  当前页面路由的路径
• $route.params 当前页面路由参数
• $route.query  当前页面查询参数
• $route.name  当前页面名字
• $route.hash 当前页面路由hash值
• $route.meta 当前页面路由元信息
• $route.fullPath 当前页面完整路径，带参数
• $route.matched  当前页面路径配置参数

导航守卫钩子函数 —— 常用来做用户登录后显示部分隐藏功能

router.beforeEach((to,from, next)=>{
//to 和from都是 路由信息对象,后面使用路由的钩子函数就容易理解了
})

$router介绍

$router对象是全局路由的实例，是router构造方法的实例。

常用路由实例方法

push方法：

• 字符串 this.$router.push('home')
• 对象 this.$router.push({path:'home'})
• 命名的路由 this.$router.push({name:'user',params:{userId:123}})
• 带查询参数  /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})

注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

go方法：

this.$router.go(-1)

replace方法

this.$router.replace('/')

总结：$router是整个项目的路由，方法用来实现页面跳转；$route是当前页面路由的信息参数。要页面参数用$route，页面跳转用$router。

遇到一个坑，就要多学点，搞不好哪个面试官会问到这样的小旮旯的问题！