Question

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

2018-12-04

67

vue.js vue-router

我正在使用 Vue CLI 3，它创建了一些路由。一个是 Home.vue。在我的程序中，我试图以编程方式转到不同的页面。我在 router.js 中添加了所需的路由，但保留了已经为 Home.vue 和 About.vue 创建的路由。它工作正常，直到我到达“Home”并收到警告：“[vue-router] 名为“Home”的路由不存在。”

这是代码：

 <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

您是否使用命名路线？在这种情况下，您需要使用 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>