CODEWITHSUNDEEP
javascriptvue.jsvue-router
Bitwise
Bitwise

Reputation: 8461

Vue router button not clickable because setup is incorrect

I'm trying to setup Vue router for the first time and I'm running into trouble.

router/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
    }
  ]
})

app.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>

Navigation.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>

That vue-router option is not working in my navigation. It shows up on the page but it's not clickable and I'm getting this error in the console.

ERROR

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

Upvotes: 1

Views: 555

Answers (1)

Dor-Ron
Dor-Ron

Reputation: 1807

Make sure to register your router with your Vue instance. So in your 

import router from './router'

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

Upvotes: 3

Related Questions