阅读 160

Nuxt中在路由跳转时使用NProgress进度条过渡

祝开卷有益。

最近在用Nuxt来写一个跨境电商的PC端项目,第一次使用,这里记录一个坑。如果说的不对欢迎讨论指导。

我们在普通的Vue项目中经常在导航守卫中使用NProgress来做过渡,那么自然会想在Nuxt也这样做。翻看文档,发现Nuxt中自带loading配置,可以在组件中调用内置的Progesss,官方的示例代码如下:

//nuxt.config.js
export default {
  loading: true
}

//your component
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}
复制代码

但这种实例对我没有意义,因为这只是个假的loading,500ms之后自动隐藏了。我更希望和路由的进度来挂钩,也就是在路由守卫中来使用。所以默认的这loading对我们来说可能没啥用。

那么Nuxt中如何使用路由守卫呢?在plugins中(也许有更好的方法但我第一次摸还不知道) 也就是在项目下plugins文件夹加一个js文件,只要配置了就会自动加载。我的理解就是这个plugins文件夹代表一个大的插件,你的文件都属于这个插件的一部分,经过插件配置,最后运行时会自动合并加载。 主要看router-nprogress.js,代码非常简单,如下:

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
export default ({app}) => {
    app.router.beforeEach((to, from, next) => {
        NProgress.start()
        next()
    });

    app.router.afterEach(() => {
        NProgress.done()
    });
}
复制代码

这样就很熟悉了,网上很多的文章也就写到这里,但经过测试发现都有问题。自己摸索发现问题出现在这里: 他们的插件配置:

//nuxt.config.js
export default {
	plugins: [
    	  //其他无关文件忽略不计
    	  '~/plugins/router-nprogress.js'
  	]
}
复制代码

如果运行就会报这样的错

pc\node_modules\nprogress\nprogress.js:267
    return !!document.getElementById('nprogress');
    ^
ReferenceError: document is not defined
复制代码

报DOM对象不存在,那大概率是Node环境报的,如果仔细看过上面的插件配置文档,就会发现插件可以配置为Client还是Server的插件,所以配置需要指定环境:

//nuxt.config.js
export default {
	plugins: [
    	  //其他无关文件忽略不计
    	   { src: '~/plugins/router-nprogress.js', mode: 'client' }
           //或者
    	   //{ src: '~/plugins/router-nprogress.js', ssr: false }
  	]
}
复制代码

也就是只在客户端生成并使用,服务器端不需要。

经测试这样改完就可以正常使用了,NProgress的其他配置就不说咯。

最后附一张刚微博看到的有趣评论