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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
<style>
ul{list-style-type: none;padding: 0;}
li{display: inline-block;}
a{padding: 5px;}
a.router-link-active, li.router-link-active>a { color: red;}
</style>
</head>
<body>
<div id="app">
    <router-view name="navigation"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const NotFound = { template: '<h2>Страница не найдена</h2>' }
const NavBar = { template: `<ul>
		<li><router-link to="/">Home</router-link></li>
		<li><router-link to="/about">About</router-link></li>
	 </ul>`}
const Home = { template: '<h2>Home Page</h2><p>Home Page Content</p>' }
const About = { template: '<h2>About Page</h2><p>About Page Content</p>' }
 
const Footer = { template: '<div><p>Copyright©2020 All rights reserved.</p></div>' }

const routes = [
  { path: '/',
    components: {
	  navigation: NavBar,
      default: Home
    }
  },
  { 
    path: '/about',
    components: {
	  navigation: NavBar,
      default: About,
      footer: Footer
    }
  },
  { path: '/:pathMatch(.*)*', component: NotFound },
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

const app = Vue.createApp({});
app.use(router);	
app.mount('#app');
</script>
</body>
</html>

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

<router-view name="navigation"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>

Первое представление имя "navigation". Второе представление не имеет имени. В этом случае неявно ему присваивается имя по умолчанию "default". Третье представление называется "footer".

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

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

{ 
	path: '/',
    components: {
	  navigation: NavBar,
      default: Home
    }
  },

Он использует путь '/'. Для установки используемых компонентов применяется параметр components, через который для каждого представления можно определить свой компонент. Так, для представления navigation будет использоваться компонент NavBar, который хранит набор ссылок.

Представление, которое не имеет имени, доступно здесь через псевдоним "default". Оно будет использовать компонент Home.

При этом необязательно для каждого представления устанавливать свой компонент. Так, в данном случае определяем сопоставление только для двух представлений - default и navigation.

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

{ 
    path: '/about',
    components: {
	  navigation: NavBar,
      default: About,
      footer: Footer
    }
}

В данном случае представление navigation опять связывается с компонентом NavBar, для представления default применяется компонент About, а для предствления footer - одноименный компонент Footer.

Таким образом, при обращении по пути "/" отобразится набор навигационных ссылок и содержимое компонента Home:

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

А при переходе по пути "/about" будут отображаться все три представления с определенной информацией:

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

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

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