Для создания системы навигации в приложении 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; }
Также дополнительно мы можем установить других свойств для 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>