Именованные представления

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

Для создания сложных макетов мы можем использовать в одном шаблоне сразу несколько элементов <router-view> или представлений. При этом для каждого представления можно определить свое имя с помощью атрибута name. Затем, используя данное имя мы сможем сопоставить это представление с определенным компонентом, который будет определять содержимое представления.

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

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <router-view></router-view>
    <router-view name="ads"></router-view>
    <router-view name="content"></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 HomeLink = { template: '<router-link to="/" exact>Главная</router-link>' }

const Products = { template: `
  <div>
  <h2>Товары</h2>
    <ul>
      <li><router-link to="/phones">Смартфоны</router-link></li>
      <li><router-link to="/tablets">Планшеты</router-link></li>
    </ul>
  </div>
` }
const PhonesAds = { template: '<div><h3>Реклама смартфонов</h3><p>Покупайте смартфоны фирмы Y</p></div>' }
const TabletsAds = { template: '<div><h3>Реклама планшетов</h3><p>Покупайте планшеты фирмы X!</p></div>' }

const Phones ={template:'<h2>Все о смартфонах</h2>'}
const Tablets ={template:'<h2>Все о планшетах</h2>'}

const routes = [
  { path: '/',
    components: {
      default: HomeLink,
      content: Products
    }
  },
  { 
	path: '/phones',
    components: {
      default: HomeLink,
      ads: PhonesAds,
      content: Phones
    }
  },
  { 
	path: '/tablets',
    components: {
      default: HomeLink,
      ads: TabletsAds,
      content: Tablets
    }
  },
  { path: '*', component: NotFound }
];

const router = new VueRouter({
    mode: 'history',
    routes: routes
});
new Vue({
  el: '#app',
  router: router
})
</script>
</body>
</html>

Здесь в шаблоне объекта Vue определено три представления:

<router-view></router-view>
<router-view name="ads"></router-view>
<router-view name="content"></router-view>

Первое представление не имеет имени и, допустим, оно будет представлять навигацию по приложению. Второе представление называется "ads", и оно будет представлять рекламный блок. Третье представление называется "content", и оно представляет основное содержимое.

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

Первый маршрут выглядит следующим образом:

{ 
	path: '/',
    components: {
      default: HomeLink,
      content: Products
    }
  }

Он использует путь '/'. Для установки используемых компонентов применяется параметр components, через который для каждого представления можно определить свой компонент. Представление, которое не имеет имени, доступно здесь через псевдоним "default". Для обращения к остальным представлениям используется их имя. В то же время это делать необязательно для каждого представления устанавливать свой компонент. Так, в данном случае определяем сопоставление только для двух представлений - default и content.

Аналогично выглядит второй и третий маршруты, только в них компоненты устанавливаются для всех трех представлений:

{ 
	path: '/phones',
    components: {
      default: HomeLink,
      ads: PhonesAds,
      content: Phones
    }
  },
  { 
	path: '/tablets',
    components: {
      default: HomeLink,
      ads: TabletsAds,
      content: Tablets
    }
  }

То есть в данном случае первое безымянное представление будет отображать ссылку навигации, второе представление ads будет отображать рекламу выбранных товаров, а третье представление content будет отображать информацию о выбранных товаров.

Таким образом, при обращении по пути "/" отобразится список выбора типа товаров:

Named views in Vue.js

А при выборе определенного типа товара будут отображаться все три представления с определенной информацией:

Именованные представления во Vue.js router-view in Vue.js

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

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