CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
margherita pizza
margherita pizza

Reputation: 7185

VueJS route is undefined

I'm trying to render my vue components inside the router-view tag. But it gives me an error

TypeError: route is undefined

But I didn't use the word route in anywhere. This is my code.

App.vue

<template>
  <div id="app">
    <my-header></my-header>

    <router-view></router-view>

    <my-footer></my-footer>
  </div>
</template>

outerroutes.js

import welcome from './components/welcome.vue';
import insideSystem from './components/insideSystem.vue';
import forgotPassword from './components/forgotPassword.vue';

export const routes = [
  {path:'',component:welcome},
  {path:'/insideSystem',component:insideSystem},
  {path:'/forgotPassword',component:forgotPassword}

];

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import {routes} from './outerroutes';
Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode:'history'
});

new Vue({
  el: '#app',
  routes,
  render: h => h(App)
})

I'm wondering where is this route came from.

Upvotes: 6

Views: 12524

Answers (2)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

You are creating a router instance as follows;

const router = new VueRouter({ 
    routes, 
    mode:'history' 
});

But you should inject the router instance to router option in the root vue instance not routes

new Vue({
  el: '#app',
  router,
  //routes, not this
  render: h => h(App)
})

Upvotes: 8

casey
casey

Reputation: 41

In outerroutes.js:

{path:'',component:welcome},

There is nothing defined. Try:

{path:'/',component:welcome},

Additionally, I'm not sure that you need the curly braces around routes in main.js at:

import {routes} from './outerroutes';

Upvotes: 1

Related Questions