Для создания сложных макетов мы можем использовать в одном шаблоне сразу несколько элементов <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 будет отображать информацию о выбранных товаров.
Таким образом, при обращении по пути "/" отобразится список выбора типа товаров:
А при выборе определенного типа товара будут отображаться все три представления с определенной информацией: