nuxt使用笔记

161 阅读1分钟

1、nuxt路由跳转是声明式跳转, <nuxt-link>标签,路由是约定的,不需要多余的router文件,只要按照目录结构进行就可以

2、nuxt在不同的生命周期阶段,window对象有所不同,beforeMount及以后才有window对象,在此之前请使用this。

3、nuxt生命周期有以下几个阶段nuxtServerInit(store中) -> middleware(中间件,nuxt.config、layout、以及页面都可以调用) -> validate(数据校验,页面级) -> asyncData(获取页面服务端渲染的数据) -> fetch(操作store,发起请求) ->render(渲染客户端)->进入vue的生命周期,黄色框内还没有window对象,后续的才会有

路由守卫

前置

  • 依赖中间件middleware,插件
  • 全局守卫:
    • nuxt.config 指向middleware
    • layout定义中间件
  • 组建独享守卫:
    • middleware
  • 插件全局前置守卫

后置

  • 使用vue的 beforeRouteLeave钩子

  • 插件全局后置守卫