JavaEar 专注于收集分享传播有价值的技术资料

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

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

1个回答

    最佳答案
  1. 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.