Question

我正在尝试使用两个路由器路由两页， main.js和profile.js 和两个init文件main和profile

＆＃13;

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

＆＃13;

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
  }
})

＆＃13;

路由器.. ..

＆＃13;

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

＆＃13;

profile.js

＆＃13;

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

＆＃13;

如果需要，

包含更多代码它工作正常，而只有一个路由器。你可以解决问题。提前致谢

Answer 1

当您将路由器添加到Vues时，必须使用名称router。

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

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

Vue不知道ProfileRouter或MainRouter是什么。记住语法

很重要

{ router }

是

的简写

{ router: router }

这是introduced with ES2015。

[Vue警告]：渲染功能出错：＆＃34; TypeError：无法读取属性＆＃39;匹配＆＃39;未定义＆＃34;

1 个答案: