How to concatenate routes in framework7 vue js

Questions
1

I would like to know how do I separate the routes into separate files and then concatenate them all into a single routes.js file using framework7 + Vue.js.

Similar to the way it is used in Vue Router from Vue.js.

My routes.js file:

import HomePage from '@/pages/Home.vue';
import Contact from '@/pages/Contact.vue';
import AboutPage from '@/pages/About.vue';

import userRoutes from '@/pages/User/router';
import tipsRoutes from '@/pages/Tips/router';
import postsRoutes from '@/pages/Posts/router';

import NotFoundPage from '../pages/404.vue';

var baseRoutes = [
  {
    path: '/',
    component: HomePage,
    name: 'home'
  },
  {
    path: '/contact/',
    component: Contact,
    name: 'contact'
  },
  {
    path: '/about/',
    component: AboutPage,
    name: 'about'
  },
  {
    path: '(.*)',
    component: NotFoundPage,
  },
];

const routes = baseRoutes.concat(userRoutes, tipsRoutes, postsRoutes);

export default routes;
2

Something like this?

import HomePage from '@/pages/Home.vue';
import Contact from '@/pages/Contact.vue';
import AboutPage from '@/pages/About.vue';

import userRoutes from '@/pages/User/router';
import tipsRoutes from '@/pages/Tips/router';
import postsRoutes from '@/pages/Posts/router';

import NotFoundPage from '../pages/404.vue';

var baseRoutes = [
  ...userRoutes,
  ...tipsRoutes,
  ...postsRoutes,
  {
    path: '/',
    component: HomePage,
    name: 'home'
  },
  {
    path: '/contact/',
    component: Contact,
    name: 'contact'
  },
  {
    path: '/about/',
    component: AboutPage,
    name: 'about'
  },
  {
    path: '(.*)',
    component: NotFoundPage,
  },
];

export default routes;
3

Did not work :frowning:

It seems that it cannot see the import in other javascript files.

My file that I’m important is like this, with a default export of the routes.

router.js

export default [
	{
		path: '/login/',
		name: 'login',
		asyncComponent: () => import('@/pages/User/views/Login.vue')
	},
	{
		path: '/register/',
		name: 'register',
		asyncComponent: () => import('@/pages/User/views/Register.vue')
	},
	{
		path: '/change-password/',
		name: 'changePassword',
		asyncComponent: () => import('@/pages/User/views/ChangePassword.vue')
	},
];
4

I tried that way and it didn’t work either.

router.js

import Login from '@/pages/User/views/Login.vue';
import Register from '@/pages/User/views/Register.vue';
import ChangePassword from '@/pages/User/views/ChangePassword.vue';

const userRoutes = [
	{
		path: '/login/',
		name: 'login',
		component: Login
	},
	{
		path: '/register/',
		name: 'register',
		component: Register
	},
	{
		path: '/change-password/',
		name: 'changePassword',
		component: ChangePassword
	},
];

export default userRoutes;

Main routes.js file


import HomePage from '@/pages/Home.vue';
import Contact from '@/pages/Contact.vue';
import AboutPage from '@/pages/About.vue';

import userRoutes from '@/pages/User/router';

import NotFoundPage from '@/pages/404.vue';

const routes = [
  {
    path: '/',
    component: HomePage,
    name: 'home'
  },
  {
    path: '/contact/',
    component: Contact,
    name: 'contact'
  },
  {
    path: '/about/',
    component: AboutPage,
    name: 'about'
  },
  {
    path: '(.*)',
    component: NotFoundPage,
  },
  ...userRoutes,
];


export default routes;