javascript - Vue 路由器按钮不可点击，因为设置不正确

Question

我第一次尝试设置 Vue 路由器时遇到了麻烦。

路由器/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Services from '../components/Services'
import App from '../app'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'App',
      component: App
    },
    {
      path: '/services',
      name: 'Services',
      component: Services
    }
  ]
})

应用程序.vue

<template>
  <div id='app'>
    <Navigation></Navigation>

    <div class="Site-content">
      <router-view></router-view>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
  import Services from "../javascript/components/Services";
  import Footer from "../javascript/components/Footer";
  import Navigation from "../javascript/components/Navigation";

  export default {
    components: {
      Footer,
      Navigation,
      Services
    },

    data: function () {
      return {
        message: "Welcome to Ping Party From Vue!"
      }
    }
  }
</script>

导航.vue

<template>
  <div id="navigation">
    <nav v-bind:class="active" v-on:click>
      <a href="#" class="home" v-on:click="makeActive('home')">Home</a>
      <a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
      <router-link to="/services">Services</router-link>
      <a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
    </nav>
  </div>
</template>

<script>
  import Services from './Services'

  export default {
    data () {
      return { active: 'home' }
    },
    methods: {
      makeActive: function(item) {
        this.active = item;
      }
    }
  }
</script>

vue-router 选项在我的导航中不起作用。它显示在页面上但不可点击，我在控制台中收到此错误。

错误

Unknown custom element: <router-link> - did you register the component 
correctly? For recursive components, make sure to provide the "name" 
option.

found in

---> <Navigation> at app/javascript/components/Navigation.vue
   <App> at app/javascript/app.vue
     <Root>

 Unknown custom element: <router-view> - did you register the component 
 correctly? For recursive components, make sure to provide the "name" 
 option.

 found in

  ---> <App> at app/javascript/app.vue

Answer 1

确保将路由器注册到 Vue 实例。所以在你的

import router from './router'

new Vue({
    el: '#some-element'
    router,  // This line is important
    render: h => h(App) 
})