如何以编程方式返回 Vue cli 的预制 Home.vue

Question

我正在使用 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>

Answer 1

你在使用named routes吗？在这种情况下，您需要使用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>