Именованные маршруты

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

Маршруты во Vue.js могут иметь имена. Используя имена маршрутов в дальнейшем мы можем, к примеру, привязывать пути ссылок к этим маршрутам.

Для установки имени в определении маршрута используется свойство name:

{ path: '/', component: Home, name: 'Home' }

Например, определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация Vue.js</title>
<meta charset="utf-8" />
<style>
a{padding: 5px;}
a.router-link-active, li.router-link-active>a {
  color: red;
}
</style>
</head>
<body>
<div id="app">
    <div><router-link to="/" exact>Главная</router-link></div>
    <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>Страница не найдена</h2>' }
const Home = { template: `<div><h2>Главная</h2>
  <ul>
      <li><router-link :to="{ name: 'products', params: { id: 1 }}">Товар 1</router-link></li>
      <li><router-link :to="{ name: 'products', params: { id: 2 }}">Товар 2</router-link></li>
      <li><router-link :to="{ name: 'products', params: { id: 3 }}">Товар 3</router-link></li>
      <li><router-link :to="{ name: 'products', params: { id: 4 }}">Товар 4</router-link></li>
  </ul></div>` }
const Products = { template: '<h2>Товар {{$route.params.id}}</h2>' }
 
const routes = [
  { path: '/', component: Home },
  { 
    path: '/products/:id', 
    component: Products,
    name: 'products'
    },
    { path: '*', component: NotFound }
];
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
new Vue({
  el: '#app',
  router: router
})
</script>
</body>
</html>

Здесь используется именованный маршрут Products. В шаблоне объекта Vue определен ряд ссылок, которые привязаны к данному маршруту:

<router-link :to="{ name: 'products', params: { id: 1 }}">Товар 1</router-link>

Для установки привязки атрибут v-bind:to (или просто :to) принимает объект, в котором параметр name представляет имя маршрута, а параметр params применяется для установки значений параметров маршрута (если маршрут использует параметры).

В итоге также будут создаваться ссылки, но теперь с привязкой к маршруту:

Named routes in Vue.js

Какое преимущество у именованных маршрутов? Если, к примеру, мы захотим изменить путь, который используется маршрутом, то после измения пути не надо будет менять ссылки, которые привязаны к этому маршруту. Как в данном случае четыре ссылки привязаны к одному маршруту. Если бы маршрут был бы неименованным, то при изменении его пути (без изменения параметров) пришлось бы менять все четыре ссылки. А с именованным маршрутом не надо менять адрес создаваемых ссылок, поскольку они автоматически привязаны к этому маршруту.

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

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