Итак, на днях я использовал маршрутизатор 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. Я добавил туда розовый банан, просто чтобы вы знали.