Навигация и ссылки

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

Для создания системы навигации в приложении Vue.js применяется компонент router-link. С помощью свойства to у данного компонента можно установить путь для создаваемой ссылки.

Так, возьмем проект из прошлой темы и изменим файл index.html следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация Vue.js</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">
    <ul>
      <li><router-link to="/" exact>Home</router-link></li>
      <li><router-link to="/products">Products</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <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 Products = { template: '<h2>Products Page</h2>' }
const About = { template: '<h2>About Page</h2>' }

const routes = [
  { path: '/', component: Home },
  { path: '/products', component: Products },
  { 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 фактически содержит набор ссылок:

<ul>
	<li><router-link to="/" exact>Home</router-link></li>
	<li><router-link to="/products">Products</router-link></li>
	<li><router-link to="/about">About</router-link></li>
</ul>

Атрибут to в качестве значения принимает один из путей, который используется для определения маршрута.

Кроме того, у первой ссылки указан атрибут exact. Дело в том, что путь "/" фактически соответствует любому пути, который начинается с этого символа, в том числе и путям "/about" и "/products". Атрибут exact обеспечивает точное соответствие маршрута только с путем "/".

Также стоит отметить, что при нажатии на ссылку к элементу будет добавляться класс router-link-active. И мы можем использовать это обстоятельство для стилизации активной ссылки:

 a.router-link-active, li.router-link-active>a {
  color: red;
}
Активные ссылки в Vue.js router-link in Vue.js

Также дополнительно мы можем установить других свойств для router-link. Например, определим новый класс CSS:

.active{
  color: green;
}

Чтобы этот класс использовался в качестве класса для активной ссылки, необходимо использовать свойство active-class:

<ul>
	<li><router-link to="/" exact active-class="active">Home</router-link></li>
	<li><router-link to="/products" active-class="active">Products</router-link></li>
	<li><router-link to="/about" active-class="active">About</router-link></li>
</ul>

С помощью атрибута tag можно установить, в какой элемент будет помещаться ссылка:

<router-link tag="div" to="/"><a>Home</a></router-link>

В этом случае будет создаваться элемент div, в который помещается ссылка:

<div><a href="/">Home</a></div>

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

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