Маршрутизация

Определение маршрутов

Последнее обновление: 29.10.2017

Vue.js имеет полноценную систему маршрутизации, которая позволяет сопоставлять запросы к приложению с определенными компонентами. За работу системы маршрутизации во Vue.js отвечает специальная библиотека - vue-router.

Итак, создадим приложение, которое будет использовать маршруты. При этом следует учитывать, что чтобы использовать маршрутизацию в приложении Vue.js, необходимо запускать приложение на сервере, то есть просто кинуть страницу с кодом в браузер не получится. Поэтому для запуска будем использовать Node.js, как наиболее демократичный вариант.

Вначале создадим каталог на жестком диске, где будет размещаться проект. Добавим в этот каталог новый файл package.json:

{
    "name": "routerapp",
    "description": "A Vue.js project with routing",
    "version": "1.0.0",
    "author": "Eugene <metanit.com>",
    "scripts": {
        "start": "lite-server"
    },
    "devDependencies": {
        "lite-server": "^2.2.1"
	}
}

Данный файл просто определяет пакет lite-server, который будет необходим для запуска приложения. Но вообще при желании можно использовать и другие веб-серверы, например, Apache, IIS и т.д.

Затем определим в каталоге проекта файл index.html:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js-router/dist/vue-router.js"></script>
<script>
// компоненты, которые обрабатывают пути
const NotFound = { template: '<h2>Page Not Found</h2>' }
const Home = { template: '<h2>Home Page</h2>' }
const About = { template: '<h2>About Page</h2>' }

// маршруты, сопотавленные с компонентами
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '*', component: NotFound }
];
// создаем объект маршрутизатора
const router = new VueRouter({
    mode: 'history',
    routes: routes
});

new Vue({
  el: '#app',
  router: router
})
</script>
</body>
</html>

Прежде всего чтобы использовать маршрутизацию в приложении, в начале файла подключается соответствующая библиотека vue-router:

<script src="https://unpkg.com/vue@2.7.14/dist/vue.js-router/dist/vue-router.js"></script>

В коде javascript вначале определяются несколько компонентов, которые будут обрабатывать запросы по определенным путям:

const NotFound = { template: '<h2>Page Not Found</h2>' }
const Home = { template: '<h2>Home Page</h2>' }
const About = { template: '<h2>About Page</h2>' }

Затем определяются маршруты, которые сопоставляют пути запроса и компоненты:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '*', component: NotFound }
];

Каждый маршрут определяет свойство path, которое представляет путь запроса, и свойство component - компонент, который будет обрабатывать запрос по этому пути.

Таким образом, компонент Home будет обрабатывать запрос по пути "/", то есть по сути запрос к корню сайта. Компонент About обрабатывает запросы по пути "/about". А компонент NotFound будет обрабатывать все остальные пути, для этого для него свойство path имеет в качестве значения "*". Причем когда приложение получит запрос, то этот запрос будет последовательно сопоставляться со всеми маршрутами. Первый маршрут, у которого свойство path совпадет с путем запроса и будет выбран для обработки.

Затем создается объект маршрутизатора VueRouter:

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

У этого объекта устанавливаются два свойства. Свойство mode указывает на используемый режим навигации. В частности, значение "history" применяет history.pushState API, которое позволяет использовать навигацию без перезагрузки страницы.

Далее свойство routes устанавливает маршруты - это выше определенные маршруты.

И в конце объект маршрутизатора передается в объект Vue. И кроме того, в шаблоне объекта Vue помещается компонент router-view:

<router-view></router-view>

В этот элемент и будет помещаться выбранный для обработки запроса компонент.

И в конце перейдем к командной строке с помощью команды cd к папке проекта и для установки пакета lite-server выполним команду

npm install

После ее выполнения запустим проект, введя в консоль команду

npm start

По умолчанию будет идти запрос к корню приложению, поэтому такой запрос будет обрабатываться компонентом Home:

Маршрутизация в Vue.js

А если мы обратимся по пути "/about", то запрос будет обработан компонентом About:

Маршруты и VueRouter в Vue.js

Запросы по остальным путям будет обрабатывать компонент NotFound.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850