Почему при использовании nuxt возникает «ReferenceError: window is not defined»?

Question

[Nik]

На странице в data такое:

data () {
      return {
        curTrail:  window.location.pathname.split('/')[2]
      }
    },

Когда получаю url, отправляю в VUEX:

created() {
      this.$store.dispatch('getOneProjects', this.curTrail);
    },

При переходах м\у страниц все работает нормально, но если зайти на эту страницу напрямую вылетает ошибка:

ReferenceError: window is not defined

В чем проблема?

Answer 1

[Дмитрий Беляев]

У nuxt двухсторонний рендеринг, когда запрашиваем страницу напрямую - рендер происходит на сервере, а у node.js нет объекта window
используйте context.route

data (context) {
      return {
        curTrail:  context.route.route.path.split('/')[2]
      }
    },

Comments

[Nik]

Дмитрий Беляев а что должно было придти в context? у меня там undefined
мне подошло вот такое решение
this.$route.path.split('/')[2]

[Дмитрий Беляев]

Nik: если это компонент, то да, именно так, компоненты в nuxt - обычные vue компоненты
если это page - то в nuxt это обернутые компоненты, и data() у них не имеет this, но первым аргументом получает контекст https://ru.nuxtjs.org/api/pages-context/

[Nik]

Дмитрий Беляев: т.е в моем случае если я хочу работать с context то должен использовать asyncData? например:

asyncData (context) {
      return {
          projecter:  context.isClient
      }
    }