Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Get started] Routing #2

Merged
merged 4 commits into from
Sep 27, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions content/ru/guides/get-started/routing.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
---
title: Routing
description: Most websites have more than just one page. For example a home page, about page, contact page etc. In order to show these pages we need a Router.
title: Маршрутизация
description: Большинство сайтов имеют больше одной страницы. К примеру: главная страница, страница о нас, страница контактов и т.д. Для показа этих страниц нам понадобится Маршрутизатор.
position: 2
category: get-started
csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/01_get_started/02_routing?fontsize=14&hidenavigation=1&theme=dark
---

## Automatic Routes
## Автоматическая маршрутизация

Most websites will have more than one page (i.e. a home page, about page, contact page etc.). In order to show these pages, we need a Router. That's where `vue-router` comes in. When working with the Vue application, you have to set up a configuration file (i.e. `router.js`) and add all your routes manually to it. Nuxt.js automatically generates the `vue-router` configuration for you, based on your provided Vue files inside the `pages` directory. That means you never have to write a router config again! Nuxt.js also gives you automatic code-splitting for all your routes.
Большинство сайтов имеют более одной страницы (К примеру: главная страница, страница о нас, страница контактов и т.д.). Для отображения этих страниц нам понадобится Маршрутизатор. С этим нам поможет `vue-router`. При работе с Vue.js приложением у нас был файл конфигурации (`router.js`), в который мы добавляли свои маршруты. Nuxt.js автоматически генерирует конфигурационный файл `vue-router` на основе `.vue` файлов внутри директории `pages`. Поэтому вам не придется писать конфигурацию роутера самостоятельно! Nuxt.js также предоставляет автоматическое разделение кода (code-splitting) для всех маршрутов.

In other words, all you have to do to have routing in your application is to create `.vue` files in the `pages` folder.
Другими словами, все, что нужно для настройки маршрутизации - это создать `.vue` файлы в директории `pages`.

<base-alert type="next">

Learn more about [Routing](/guides/features/file-system-routing)
Подробнее о [Маршрутизации](/guides/features/file-system-routing)

</base-alert>

## Navigation
## Навигация

To navigate between pages of your app, you should use the [NuxtLink](/guides/features/nuxt-components#the-nuxtlink-component) component. This component is included with Nuxt.js and therefore you don't have to import it as you do with other components. It is similar to the HTML `<a>` tag, except that instead of using a `href="/about"` we use `to="/about"`. If you have used `vue-router` before, you can think of the `<NuxtLink>` as a replacement for `<RouterLink>`
Доя навигации между страницами вашего приложения вы должны использовать компонент [NuxtLink](/guides/features/nuxt-components#the-nuxtlink-component). Этот компонент - часть Nuxt.js и, следовательно, его не нужно импортировать, как вы обычно это делаете с другими компонентами. Он похож на HTML тег `<a>`, за исключением того, что вместо `href="/about"` мы используем `to="/about"`. Если ранее вы использовали `vue-router`, то можете считать `<NuxtLink>` заменой `<RouterLink>`

A simple link to the `index.vue` page in your `pages` folder:
Простая ссылка на страницу `index.vue` в директории `pages`:

```html{}[pages/index.vue]
<template>
<NuxtLink to="/">Home page</NuxtLink>
<NuxtLink to="/">Главная страница</NuxtLink>
</template>
```

For all links to pages within your site, use `<NuxtLink>`. If you have links to other websites you should use the `<a>` tag. See below for an example:
Для всех ссылок на страницы вашего сайта используйте `<NuxtLink>`. Если у вас есть ссылки на другие сайты - используйте тег `<a>`. Взгляните на пример ниже:

```html{}[pages/index.vue]
<template>
<main>
<h1>Home page</h1>
<h1>Главная страница</h1>
<NuxtLink to="/about">
About (internal link that belongs to the Nuxt App)
О нас (внутренняя ссылка Nuxt)
</NuxtLink>
<a href="https://nuxtjs.org">External Link to another page</a>
<a href="https://nuxtjs.org">Внешняя ссылка на другую страницу</a>
</main>
</template>
```
Expand All @@ -50,6 +50,6 @@ For all links to pages within your site, use `<NuxtLink>`. If you have links to

<base-alert type="next">

Learn more about the [NuxtLink component](/guides/features/nuxt-components#the-nuxtlink-component).
Подробнее о компоненте [NuxtLink](/guides/features/nuxt-components#the-nuxtlink-component).

</base-alert>