问题描述:

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

为了实现页面跳转之后,返回还显示用户看过的页面/筛选过的数据,就在项目中加入了keepAlive,没想到第一次使用就遇到了,度娘都没有发生过的bug:“TypeError: Cannot read property 'keepAlive' of undefined”......
vue使用keepAlive之后页面空白白屏?route和router什么区别呢?-Qui-Note

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)
}

vue使用keepAlive之后页面空白白屏?route和router什么区别呢?-Qui-Note
路由里面也没有meta参数?去哪了,重启项目,依旧报错!!

vue使用keepAlive之后页面空白白屏?route和router什么区别呢?-Qui-Note

解决白屏办法

然后页面切换的时候,发现监听路由变化用的是”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的参数信息,如下:
vue使用keepAlive之后页面空白白屏?route和router什么区别呢?-Qui-Note

$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。

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