【问题标题】:[Vue warn]: Error in render function: "TypeError: Cannot read property 'matched' of undefined" [duplicate][Vue warn]: Error in render function: "TypeError: Cannot read property 'matched' of undefined" [duplicate]
【发布时间】:2017-12-29 04:58:27
【问题描述】:

我正在尝试使用两个路由器为两个页面进行路由, main.js 和 profile.js 和 两个init文件main和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
  }
})

路由器是..

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

如果需要,将包含更多代码... 当只有一个路由器时,它工作正常。 你能解决问题吗? 提前致谢

【问题讨论】:

    标签: javascript ecmascript-6 vue.js vuejs2 vue-router


    【解决方案1】:

    当您将路由器添加到您的 Vue 时,您必须使用名称 router

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

    Vue 不知道 ProfileRouterMainRouter 是什么。重要的是要记住语法

    { router }
    

    的简写
    { router: router }
    

    这是introduced with ES2015

    【讨论】:

    • thanx bro.. 效果很好
    • 完成 :) 。我没有名声..所以接受
    猜你喜欢
    • 2021-09-11
    • 2017-04-24
    • 2023-01-19
    • 2023-03-31
    • 2019-02-12
    • 2017-12-29
    • 2021-09-20
    • 2021-06-08
    • 1970-01-01
    相关资源
    最近更新 更多