[Vue warn]: Error in render function: "TypeError: Cannot read property 'matched' of undefined" [duplicate]

Question

am trying to route using two routers for two pages, main.js and profile.js and two init files main and profile

//for main pages
import Vue from 'vue';
import App from './App';
import MainRouter from './router/main.js';


Vue.config.productionTip = false

/* eslint-disable no-new */
/* vue init for main pages with MainRouter */
new Vue({
  el: '#main-app',
  MainRouter,
  template: '<App/>',
  components: { 
    App
  }
})

import Vue from 'vue';
import App from './App';
import ProfileRouter from './router/profile.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
/* vue init for profile pages with profile pages router */
new Vue({
  el: '#profile-app',
  ProfileRouter,
  template: '<App/>',
  components: { 
    App
  }
})

routers are..

/* Router for main pages */

import Vue from 'vue'
import Router from 'vue-router'

/* pages */
import Meeting from '@/components/pages/meeting'
import Feeds from '@/components/pages/feeds'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Feeds',
      component: Feeds
    },
    {
      path: '/meeting',
      name: 'Meeting',
      component: Meeting
    },
    {
      path: '/activities',
      name: 'Activities History',
      component: Activities
    },
    {
      path: '/add_member',
      name: 'Add Member',
      component: Add_Member
    }
  ]
})

profile.js

/* Router for profile related pages */
import Vue from 'vue'
import Router from 'vue-router'

/* pages */
import Activities from '@/components/pages/activities_history'
import Change_Password from '@/components/pages/change_password'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Edit Profile',
      component: Edit_Profile
    },
    {
      path: '/activities',
      name: 'Activities History',
      component: Activities
    }
  ]
})

ill include more codes if needed... it was working fine while there was only one router. can u troubleshoot issue. Thanks in advance

Bert · Accepted Answer · 2017-07-23 19:34:45Z

4

When you add the router to your Vues you must use the name router.

new Vue({
  el: '#main-app',
  router: MainRouter,
  template: '<App/>',
  components: { 
    App
  }
})

new Vue({
  el: '#profile-app',
  router: ProfileRouter,
  template: '<App/>',
  components: { 
    App
  }
})

Vue has no idea what a ProfileRouter or a MainRouter are. It's important to remember that the syntax

{ router }

is shorthand for

{ router: router }

which was something that was introduced with ES2015.

answered Jul 23, 2017 at 19:34

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shiyas vp Over a year ago

thanx bro.. works well

Shiyas vp Over a year ago

done :) . i have no reputation.. so accepting

Collectives™ on Stack Overflow

[Vue warn]: Error in render function: "TypeError: Cannot read property 'matched' of undefined" [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related