'vue-router' является отдельным пакетом для Vue и устанавливается посредством 'webpack'.
Маршруты настраиваются в router / index.js
Импорт в маршрутизатор из vue-router, который находится в node_modules.
import Router from 'vue-router'
... new Router...
создает экземпляр Router, который является объектом со свойством 'route', который является массивом объекта.Каждый из этих объектов представляет собой маршрут со свойствами для «путь», «имя», что он называется, и «компонент», компонент, который вызывается при использовании маршрута.
{
path: '/about',
name: 'About',
component: About
}
Нам нужночтобы импортировать компонент, и мы используем @, который приводит путь к корню проекта, который является каталогом 'src'.
import About from '@/components/About'
Компонент загружается в корневой компонент App.vue с помощью,
<router-view/>
и где этот тег находится в App.vue.Это позволило бы нам разместить панель навигации, верхний и нижний колонтитулы, например, вокруг этого компонента About.Чтобы при переходе к… / about изменялся только компонент about на странице, а вся страница не обновлялась.
Затем создайте компонент NavBar и поместите его в шаблон App.vue.
Это будет работать,
<a href="/about">About</a>
, однако в vue это должно быть сделано так,
<router-link to="/about>About</router-link>
Когдаотображается в браузере и становится , поэтому в css мы по-прежнему называем его 'a', а не 'router-link'.
Мы можем связать данные, используя атрибут 'to' внапример,
:to={ name: 'About'}
, где 'имя' - это свойство в массиве маршрутов объекта в маршрутах main.js.Это делает маршрут динамическим.
Используя эту привязку данных, вы можете изменить / 'about' на что-то другое, например, 'abt', вам нужно только изменить,
path: 'abt',
в массиве маршрутов.объектов.