Vue.js + MPA with own route file

2.5k views Asked by At

When I try to access the page '/admin/dashboard' load page from src/Client/App.vue. I want to separate the admin and user with different vue, vuex, vue-router base in same the domain. Is it possible? My project tree.

public/
 -> admin/
   -> index.html
 -> index.hmtl
src/
 -> Admin/
   -> components/
   -> admin.ts
   -> App.vue
   -> router.ts
 -> Client/
   -> components/
   -> admin.ts
   -> App.vue
   -> router.ts
 vue.config.js

src/Admin/router.ts

export default new Router({
  mode: 'history',
  base:   '/admin/', 
  routes: [
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
    },
  ],
});

src/Client/router.ts

export default new Router({
  mode: 'history',
  base:  '/', 
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
});

vue.config.js

module.exports = {
    pages: {
        'admin': {
            entry: 'src/Admin/admin.ts',
            template: 'public/admin/index.html',
            filename: 'admin/index.html',
        },

        index: {
            entry: 'src/Client/main.ts',
            template: 'public/index.html',
            filename: 'index.html',
        },
    }
}
0

There are 0 answers