nuxt asyncData extendRoutes nuxtServerInit

最新推荐文章于 2023-12-06 18:07:04 发布

确认过眼神cxy

最新推荐文章于 2023-12-06 18:07:04 发布

阅读量505

点赞数

分类专栏： 20210427 文章标签： vue nuxt

本文链接：https://blog.csdn.net/zzk220106/article/details/116204365

版权

本文探讨了Nuxt.js框架中asyncData的使用，它主要用于服务端渲染时页面初始化，但不支持在组件内部的this调用。通过案例展示了官方推荐的配置方法，包括在nuxt.config.js、store/index.js和middleware/middle.js中的应用。同时，提到了nuxtServerInit在服务端初始化时的作用。

摘要由CSDN通过智能技术生成

材料来源 realworld 开源项目
asyncData 仅支持服务端，页面初始化，组件加载之前，不能this调用
案例
 官方

nuxt.config.js

module.exports = {
   
  router: {
   
    linkActiveClass: 'active', // nuxt-link选中样式
    extendRoutes (routes, resolve) {
   
      routes.splice(0) // 清除默认路由 默认路由是根据pages下的文件夹创建的
      routes.push(
        ...[
          {
   
            path: '/',
            component: resolve(__dirname, 'pages/layout/'),
            children: [
              {
   
                name: 'home',
                path: '/',
                component: resolve(__dirname