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>

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

1 个答案: