Vue Router в Nuxt.js

Заметка для новичков!

Заметил, что начинающие работать с Nuxt.js ребята и пришедшие из чистого Vue.js очень путаются в его встроенном роутере основанном на папках и файлах. Согласен, он действительно при написании сложных маршрутов может быть непонятным. Поэтому есть безболезненное решение как использовать привычный Vue Router в Nuxt.js.

Для начала в готовый Nuxt.js проект установим сам роутер, делается это командой:

yarn add --dev @nuxtjs/router

или

npm i --save-dev @nuxtjs/router

Затем подключаем его в виде build-модуля к Nuxt.js, для находим в корне проекта файл nuxt.config.js и в секции buildModules добавляем роутер:

export default {
  buildModules: [
    '@nuxtjs/router',
  ]
}

Ну и самое главное, в корне проекта создаём файл router.js со следующим содержимым:

import Vue from 'vue'
import Router from 'vue-router'

import HomePage from '~/pages/HomePage.vue'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'home',
        component: HomePage
      },
      {
        path: '/about',
        name: 'about',
        component: () => import(
         /* webpackChunkName: "about" */ "../pages/AboutPages.vue")
        }
    ]
  })
}

Вот и всё, теперь вы можете как угодно называть свои страницы и использовать роутер так, как вы привыкли его использовать в чистом Vue.js.

Тут можете найти документацию по плагину: https://www.npmjs.com/package/@nuxtjs/router

Подписывайтесь на канал в Telegram: https://t.me/stuffy_vuejs