router-module - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #machine-learning #rust #macos #java #windows #awesome #cli #kubernetes #security #open-source

router-module

(★ 394)

Nuxt 2 module to use router.js instead of pages/ directory.

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
- module.ts
- plugin.js
- custom-file-path.test.ts
- disable-parse-pages.test.ts
- fail.test.ts
- keep-default-router.test.ts
- ok.test.ts
.editorconfig
.eslintignore
.eslintrc
.gitignore
CHANGELOG.md
jest.config.js
LICENSE
package.json
README.md
renovate.json
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/nuxt-community/router-module

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd router-module

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn add --dev @nuxtjs/router # or npm install --save-dev @nuxtjs/router

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @nuxtjs/router

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]

Nuxt 2 module to use router.js instead of pages/ directory

[📖 **Release Notes**](./CHANGELOG.md)

## Nuxt 3

This is now possible to extend `vue-router` with Nuxt 3 with different methods, learn more on https://nuxt.com/docs/guide/going-further/custom-routing

If you don't have the `pages/` directory, make sure to enable Vue Router with:

```ts
export default defineNuxtConfig({
  pages: true
})
```

## Features

Use your own `router.js` to handle your routes into your [Nuxt.js](https://nuxtjs.org) application.

## Setup

1. Add `@nuxtjs/router` dependency to your project

```bash
yarn add --dev @nuxtjs/router # or npm install --save-dev @nuxtjs/router
```

2. Add `@nuxtjs/router` to the `buildModules` section of `nuxt.config.js`

```js
export default {
  buildModules: [
    // Simple usage
    '@nuxtjs/router',

// With options
    ['@nuxtjs/router', { /* module options */ }]
  ]
}
```

:warning: If you are using Nuxt **< v2.9** you have to install the module as a `dependency` (No `--dev` or `--save-dev` flags) and use `modules` section in `nuxt.config.js` instead of `buildModules`.

### Using top level options

```js
export default {
  buildModules: [
    '@nuxtjs/router'
  ],
  routerModule: {
    /* module options */
  }
}
```

If you are using SPA mode, add an index `/` route to `generate` section of `nuxt.config.js`:

```js
export default {
  generate: {
    routes: [
      '/'
    ]
  }
}
```

## Options

### `path`

- Type: `String`
- Default: `srcDir`

Location of you route file.

### `fileName`

- Type: `String`
- Default: `router.js`

Name of you route file.

### `keepDefaultRouter`

- Type: `Boolean`
- Default: `false`

Can access the default router.

### `parsePages`

- Type: `Boolean`
- Default: `'keepDefaultRouter'`

Can disable/enable the `pages/` directory into Nuxt.

## Usage

This module, by default, disable the `pages/` directory into Nuxt and will use a `router.js` file at your `srcDir` directory:

```bash
components/
  my-page.vue
router.js
```

`router.js` need to export a `createRouter` method like this:

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

import MyPage from '~/components/my-page'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: MyPage
      }
    ]
  })
}
```

The components defined as routes have access to the same special attributes and functions (head, asyncData, validate, etc.) as the [Nuxt Page component](https://nuxtjs.org/guide/views/#pages).

### Accessing default router

If you use the module with `{ keepDefaultRouter: true }`, you can access the default router:

:warning: If you are using Nuxt `< 2.9.0`, the parameter `routerOptions` is not available.

:warning: If you are using Nuxt `< 2.15.0`, the parameter `config` is not available.

:warning: If you are using Nuxt `< 2.16.0`, the parameter `store` is not available.

```js
export function createRouter(ssrContext, createDefaultRouter, routerOptions, config, store) {
  const options = routerOptions ? routerOptions : createDefaultRouter(ssrContext, config).options

return new Router({
    ...options,
    routes: fixRoutes(options.routes, store)
  })
}

function fixRoutes(defaultRoutes, store) {
  // default routes that come from `pages/`
  // Filter some routes using the content of the store for example
  return defaultRoutes.filter(...).map(...)
}
```

## Development

1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Start development server using `npm run dev`

## License

[MIT License](./LICENSE)

Copyright (c) Nuxt Community

[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/router/latest.svg
[npm-version-href]: https://npmjs.com/package/@nuxtjs/router

[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/router.svg
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/router

[github-actions-ci-src]: https://github.com/nuxt-community/router-module/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/nuxt-community/router-module/actions?query=workflow%3Aci

[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/router-module.svg
[codecov-href]: https://codecov.io/gh/nuxt-community/router-module

[license-src]: https://img.shields.io/npm/l/@nuxtjs/router.svg
[license-href]: https://npmjs.com/package/@nuxtjs/router