как программно вернуться в готовый Home.vue Vue Cli - PullRequest
Новая
       14

как программно вернуться в готовый Home.vue Vue Cli

0 голосов
/ 04 декабря 2018

Я использую Vue CLI 3, и он делает несколько маршрутов.Одним из них является Home.vue.В моей программе я пытаюсь программно перейти на разные страницы.Я добавил нужные мне маршруты в router.js, но сохранил уже созданные маршруты для Home.vue и About.vue.Он работает нормально, пока я не доберусь до «Дома» и не получу предупреждение: [vue-router] Маршрут с именем «Домой» не существует. '

Вот код: 

 <template>
    <div class='secondItem'>
         <h4 v-for="item in menuItems" 
    @click="bindMe(item)" v-bind:class="{'active':(item === current)}">{{item}}</h4>
    </div>
    </template>
    <script>
    export default {
            name: 'Header',
            data() {
                return {
                    current: '',
                    menuItems: ['Home', 'About', 'Portfolio', 'Contact'],
                }
            },
            methods: {
                bindMe(item) {
                    this.current = item;
                    this.$router.push({
                            path: item
                        })
                }

            }
        }
    <script>

1 Ответ

0 голосов
/ 04 декабря 2018

Используете ли вы именованные маршруты ?В этом случае вам нужно использовать name вместо path: 

this.$router.push({
  name: item
})

Кроме того, ваш пример может быть значительно упрощен.Попробуйте это: 

<template>
  <div class="secondItem">
    <router-link :to="{ name: item }" tag="h4" active-class="active" v-for="item in menuItems" v-bind:key="item">{{item}}</router-link>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data() {
      return {
        menuItems: ['Home', 'About', 'Portfolio', 'Contact']
      }
    }
  }
<script>
...