Итак, на днях я использовал маршрутизатор vue, и мне не нравилось вручную настраивать маршрутизатор, а затем создавать фрагмент html в моей навигации, чтобы фактически ссылаться на этот маршрут. Слишком много хлопот. Давай сделаем это проще.
Если вы просто хотите перейти к коду, посмотрите мой codepen.
Настройка вещей
Итак, я получил страницу Начало работы о маршрутизаторе vue и кое-что на ней построил. Я создал три маршрута, два из которых я хотел использовать в своей навигации. Поскольку маршруты - это просто объекты JavaScript, я добавил заголовок к двум, которые хотел в моем меню.
{ name: 'bar', title: 'Bar stool', path: '/bar', component: Bar }
Имя, название моего маршрута. Заголовок, ярлык, который я хочу использовать в своем меню. Остальное - это только основы.
Строим маршруты
Итак, получим маршруты в моих компонентах. Я создал компонент под названием маршрутизация. В этом компоненте у меня есть несколько вариантов, я использовал свойство computed из vue, чтобы… вычислить маршруты. Но сначала, где маршруты. Я обнаружил в своем компоненте $ router.
this.$router.options.routes
Вот все маршруты, но мне нужны только маршруты с заголовком, чтобы я мог управлять маршрутом, который я использую в моей навигации. Я могу просто показать функцию, но, черт возьми, весь мой компонент.
Vue.component('routing', { template: '#routing', computed: { routes: function () { var routes = []; for (var i in this.$router.options.routes) { if (!this.$router.options.routes.hasOwnProperty(i)){ continue } var route = this.$router.options.routes[i]; if(route.hasOwnProperty('title')) { routes.push(route); } } return routes; } } });
Выполнено! Если у маршрута есть свойство с именем title, я добавляю его в свою коллекцию маршрутов.
Создание шаблона
В моем шаблоне для маршрутизации я просто использовал бутстрап, чтобы он выглядел красиво. Опять же, просто украл какой-то html из компонента navbar. И я просто удалил статические ссылки и добавил свои маршруты, вычисленные из моего компонента.
<li class="nav-item" v-for="route in routes"> <router-link :to="route" class="nav-link" active-class="active"> {{ route.title }} </router-link> </li>
Опять же, все очень просто. Добавьте маршрут и покажите название, это уже было обязательно. Обратите внимание, что для активного класса установлено значение active, бутстрапу это нравится.
Мой полный шаблон здесь.
<script type="x-template" id="routing"> <nav class="navbar navbar-toggleable-md navbar-light bg-success navbar-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item" v-for="route in routes"> <router-link :to="route" class="nav-link" active-class="active"> {{ route.title }} </router-link> </li> </ul> </div> </nav> </script>
Как я уже сказал, просто скопировал полезную информацию из демонстрационного примера начальной загрузки.
Затем я просто добавил несколько шаблонов в компонент, чтобы сделать его интересным, но это все. Создавайте маршруты и управляйте элементами навигации.
Посмотреть полный пример можно на codepen. Я добавил туда розовый банан, просто чтобы вы знали.