vue-router#RouteConfig TypeScript Examples

routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    beforeEnter: authGuard
  }
]

export function setupMultistoreRoutes (config, router: VueRouter, routes: RouteConfig[], priority: number = 0): void {
  const allRoutes: RouteConfig[] = []
  const { storeCode, appendStoreCode } = currentStoreView()
  if (storeCode && appendStoreCode) {
    allRoutes.push(...routes.map(route => localizedRouteConfig(route, storeCode)))
  } else {
    allRoutes.push(...routes)
  }
  router.addRoutes(allRoutes, true, priority)
}

export function localizedRoute (routeObj: LocalizedRoute | string | RouteConfig | RawLocation, storeCode: string = null): any {
  if (!storeCode) {
    storeCode = currentStoreView().storeCode
  }
  if (!routeObj) {
    return routeObj
  }

  if ((typeof routeObj === 'object') && (routeObj as LocalizedRoute)) {
    if ((routeObj as LocalizedRoute).fullPath && !(routeObj as LocalizedRoute).path) { // support both path and fullPath
      routeObj['path'] = (routeObj as LocalizedRoute).fullPath
    }
  }

  if (storeCode && config.defaultStoreCode !== storeCode && config.storeViews[storeCode] && config.storeViews[storeCode].appendStoreCode) {
    if (typeof routeObj !== 'object') {
      return localizedRoutePath(routeObj, storeCode)
    }
    return localizedRouteConfig(routeObj as RouteConfig, storeCode)
  }

  return routeObj
}

/**
 * Returns transformed route config with language
 * @param route - route config object
 * @param storeCode - language prefix specified in global config
 * @param isChildRoute - determines if route config is for child route
 */
export function localizedRouteConfig (route: RouteConfig, storeCode: string, isChildRoute: boolean = false): RouteConfig {
  // note: we need shallow copy to prevent modifications in provided route object
  const _route = { ...route }

  if (_route.name && storeCode) {
    _route.name = `${storeCode}-${_route.name}`
  }

  if (_route.path && !isChildRoute) {
    _route.path = localizedRoutePath(_route.path, storeCode)
  }

  if (_route.children) {
    _route.children = _route.children.map(childRoute => localizedRouteConfig(childRoute, storeCode, true))
  }

  return _route
}

createRouterProxy = (router: VueRouter): VueRouter => {
  const ProxyConstructor = Proxy || require('proxy-polyfill/src/proxy')

  return new ProxyConstructor(router, {
    get (target, propKey) {
      const origMethod = target[propKey]

      if (propKey === 'addRoutes') {
        return function (routes: RouteConfig[], ...args): void {
          return RouterManager.addRoutes(routes, ...args)
        }
      }

      return origMethod
    }
  })
}

routes: RouteConfig[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', name: 'lobby', component: () => import('pages/lobby/Lobby.vue') },
    ],
  },
  {
    path: '/reload',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', name: 'reload', component: () => import('pages/Reload.vue') },
    ],
  },
  {
    path: '/play',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', name: 'play', component: () => import('pages/play/Player.vue') },
    ],
  },
  {
    path: '/spectate',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', name: 'spectate', component: () => import('pages/play/SpectatorPlayer.vue') },
    ],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue'),
  },
]

routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/:backend/:region/:gamecode',
    name: 'Instant connect',
    component: Home
  },
  {
    path: '*',
    redirect: '/'
  }
]

routes: Array<RouteConfig> = [
  {
    path: '/error',
    name: 'Error',
    component: Error,
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: async (
      _to: Route,
      _from: Route,
      next: NavigationGuardNext<Vue>
    ) => {
      if (!isEnvValid(process.env)) {
        next('/error');
      } else {
        const res = await fetch(getTokenEndpoint());
        const {token} = await res.json();
        // Adding Coveo Headless engine as a global mixin so it can be available to all components
        const engine = getEngine(token);
        Vue.mixin({
          beforeCreate: function () {
            this.$root.$data.$engine = engine;
          },
        });
        next();
      }
    },
  },
]

filterAsyncRoutes = (routes: RouteConfig[], roles: string[]) => {
  const res: RouteConfig[] = []
  routes.forEach(route => {
    const r = { ...route }
    if (hasPermission(roles, r)) {
      if (r.children) {
        r.children = filterAsyncRoutes(r.children, roles)
      }
      res.push(r)
    }
  })
  return res
}

routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ './views/home/Home.vue'),
  },
  ...Menu.menu().flatMap((group) =>
    group.children.flatMap((item) =>
      item.children
        ? item.children
            .filter((child) => child.page)
            .map(
              (child) =>
                ({
                  path: `/${item.path}/${child.path}`,
                  name: `${item.path}-${child.name || child.page}`,
                  meta: { title: child.name || child.page },
                  component: () => import(`./views/${item.path}/${child.path}/${child.page}.vue`),
                } as RouteConfig),
            )
        : [],
    ),
  ),
  {
    path: '/enums/:enum',
    name: 'Enums',
    component: () => import(/* webpackChunkName: "source" */ './views/source/Source.vue'),
  },
  {
    path: '/models/:model',
    name: 'Models',
    component: () => import(/* webpackChunkName: "source" */ './views/source/Source.vue'),
  },
  {
    path: '/utils/:util',
    name: 'Utils',
    component: () => import(/* webpackChunkName: "source" */ './views/source/Source.vue'),
  },
  {
    path: '*',
    name: 'notfound',
    meta: { title: '404' },
    component: () => import(/* webpackChunkName: "source" */ './views/error/NotFound.vue'),
  },
]

hasPermission = (roles: string[], route: RouteConfig) => {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

public dynamicRoutes: RouteConfig[] = []

private static _extendRouter (routerInstance, routes?: RouteConfig[], beforeEach?: NavigationGuard, afterEach?: NavigationGuard): void {
    if (routes) {
      setupMultistoreRoutes(config, routerInstance, routes)
    }
    if (beforeEach) routerInstance.beforeEach(beforeEach)
    if (afterEach) routerInstance.afterEach(afterEach)
  }

public routes: RouteConfig[] = []

@Mutation
  private SET_ROUTES(routes: RouteConfig[]) {
    this.routes = constantRoutes.concat(routes)
    this.dynamicRoutes = routes
  }

routes: Array<RouteConfig> = [
  // 用户登录部分
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  },

  // 概览部分
  {
    path: '/',
    component: () => import('@/views/Layer.vue'),
    meta: {
      requiresLogin: true
    },
    children: [
      // 概览部分
      {
        path: '',
        name: 'Home',
        component: () => import('@/views/Home.vue'),
        meta: { content: '概览' }
      },
      {
        path: 'mission',
        name: 'Mission',
        component: () => import('@/views/Mission.vue'),
        meta: { content: '启动任务' }
      },

      // 软件设置部分
      {
        path: 'setting/site',
        name: 'Setting/Site',
        component: () => import('@/views/Setting/Site.vue'),
        meta: { content: '辅种站点设置' }
      },
      {
        path: 'setting/btclient',
        name: 'Setting/BtClient',
        component: () => import('@/views/Setting/BtClient.vue'),
        meta: { content: '下载器设置' }
      },
      {
        path: 'setting/other',
        name: 'Setting/Other',
        component: () => import('@/views/Setting/Other.vue'),
        meta: { content: '其他设置' }
      },
      {
        path: 'setting/backup',
        name: 'Setting/Backup',
        component: () => import('@/views/Setting/Backup.vue'),
        meta: { content: '参数备份与恢复' }
      },

      // 鸣谢部分
      {
        path: 'gratitude/declare',
        name: 'Declare',
        component: () => import('@/views/Gratitude/Declare.vue'),
        meta: { content: '项目说明' }
      },
      {
        path: 'gratitude/donate',
        name: 'Donate',
        component: () => import('@/views/Gratitude/Donate.vue'),
        meta: { content: '捐赠支持' }
      }
    ]
  },

  // Miss路由时
  {
    path: '*',
    redirect: '/'
  }
]

RouterManager = {
  _registeredRoutes: new Array<RouteConfig>(),
  _routeQueue: new Array<RouteConfig>(),
  _routeQueueFlushed: false,
  _routeLock: null,
  _routeDispatched: false,
  _callbacks: [],
  addRoutes: function (routes: RouteConfig[], useRouteQueue: boolean = false, priority: number = 0): void {
    if (useRouteQueue && !this._routeQueueFlushed) {
      this._routeQueue.push(...routes.map(route => { return { route: route, priority: priority } }))
    } else {
      const uniqueRoutes = routes.filter((route) => {
        return this._registeredRoutes.findIndex(registeredRoute => registeredRoute.route.name === route.name && registeredRoute.route.path === route.path) < 0
      })
      if (uniqueRoutes.length > 0) {
        this._registeredRoutes.push(...uniqueRoutes.map(route => { return { route: route, priority: priority } }))
        baseRouter.addRoutes(uniqueRoutes)
      }
    }
  },
  flushRouteQueue: function (): void {
    if (!this._routeQueueFlushed) {
      this.addRoutesByPriority(this._routeQueue)
      this._routeQueueFlushed = true
      this._routeQueue = []
    }
  },
  addRoutesByPriority: function (routesData) {
    const routesToAdd = []
    for (const routeData of routesData) {
      let exisitingIndex = routesToAdd.findIndex(r => r.route.name === routeData.route.name && r.route.path === routeData.route.path)
      if ((exisitingIndex >= 0) && (routesToAdd[exisitingIndex].priority < routeData.priority)) { // same priority doesn't override exisiting
        routesToAdd.splice(exisitingIndex, 1)
        exisitingIndex = -1
      }
      if (exisitingIndex < 0) {
        routesToAdd.push(routeData)
      }
    }
    this._registeredRoutes.push(...routesToAdd)
    baseRouter.addRoutes(routesToAdd.map(r => r.route))
  },
  isRouteAdded: function (addedRoutes: any[], route: RouteConfig) {
    return addedRoutes.findIndex((addedRoute) => addedRoute.route.name === route.name && addedRoute.route.path === route.path) >= 0
  },
  addDispatchCallback: function (callback: Function) {
    this._callbacks.push(callback)
  },
  findByName: function (name: string): RouteConfig {
    return this.findByProperty('name', name)
  },
  findByPath: function (path: string): RouteConfig {
    return this.findByProperty('path', path)
  },
  findByProperty: function (property: string, value: string): RouteConfig {
    const registeredRoute = this._registeredRoutes.find(r => r.route[property] === value)
    if (registeredRoute) return registeredRoute.route
    if (this._routeQueueFlushed) return null
    const queuedRoute = this._routeQueue.find(queueItem => queueItem.route[property] === value)
    return queuedRoute ? queuedRoute.route : null
  },
  lockRoute: function () {
    let resolver
    this._routeLock = {
      lockPromise: new Promise(resolve => { resolver = resolve }),
      resolver
    }
  },
  isRouteProcessing: function () {
    return !!this._routeLock
  },
  isRouteDispatched: function () {
    return !!this._routeDispatched
  },
  getRouteLockPromise: function () {
    if (this._routeLock) return this._routeLock.lockPromise
    return Promise.resolve()
  },
  unlockRoute: function () {
    if (this._routeLock) {
      this._routeLock.resolver()
      this._routeLock = null
    }
    this._routeDispatched = true
    this._callbacks.forEach(callback => {
      callback()
    });
  }
}

describe('Multistore', () => {
  beforeEach(() => {
    jest.clearAllMocks();
    (rootStore as any).state = {};
    Object.keys(config).forEach((key) => { delete config[key]; });
    rootStore.state.storeView = {
      appendStoreCode: true
    }
  })

  describe('storeCodeFromRoute', () => {
    it('returns store code given url matching a storeview by path', () => {
      config.storeViews = {
        mapStoreUrlsFor: ['us'],
        us: {
          url: '/us'
        }
      };

      expect(storeCodeFromRoute('/us')).toBe('us')
    })

    it('returns store code given a route matching a storeview by path', () => {
      config.storeViews = {
        mapStoreUrlsFor: ['us'],
        us: {
          url: '/us'
        }
      };

      const route = { path: 'us' }

      expect(storeCodeFromRoute(route)).toBe('us')
    })

    it('returns store code given a url matching a storeview by url', () => {
      config.storeViews = {
        mapStoreUrlsFor: ['us', 'gb'],
        us: {
          url: '/us'
        },
        gb: {
          url: 'domain.co.uk'
        }
      };

      const route = 'domain.co.uk'

      expect(storeCodeFromRoute(route)).toBe('gb')
    })

    it('returns store code given a url matching a storeview by url with path', () => {
      config.storeViews = {
        mapStoreUrlsFor: ['us', 'gb'],
        us: {
          url: '/us'
        },
        gb: {
          url: 'domain.co.uk/gb'
        }
      };

      const route = 'domain.co.uk/gb/foo'

      expect(storeCodeFromRoute(route)).toBe('gb')
    })

    it('returns store code given a route matching a storeview by url with path', () => {
      config.storeViews = {
        mapStoreUrlsFor: ['us', 'gb'],
        us: {
          url: '/us'
        },
        gb: {
          url: 'domain.co.uk/gb'
        }
      };

      const route = {
        host: 'domain.co.uk',
        path: 'gb/foo'
      }

      expect(storeCodeFromRoute(route)).toBe('gb')
    })

    it('returns empty string if given a route which doesn\'t have url and is not matched by path', () => {
      config.storeViews = {
        mapStoreUrlsFor: ['us', 'gb'],
        us: {
          url: '/us'
        },
        gb: {
          url: 'domain.co.uk'
        }
      };

      const route = { path: 'gb' }

      expect(storeCodeFromRoute(route)).toBe('')
    })

    it('returns empty string if route was not matched to any store', () => {
      config.storeViews = {
        mapStoreUrlsFor: ['us'],
        us: {
          url: 'us.domain.tld'
        }
      };

      expect(storeCodeFromRoute('unknown-domain.tld')).toBe('')
    })

    it('returns empty string if route is not given', () => {
      expect(storeCodeFromRoute('')).toBe('')
    })
  })

  describe('prepareStoreView', () => {
    it('returns default storeView given no storecode', async () => {
      rootStore.state.storeView = {}
      rootStore.state.user = {}

      config.storeViews = {
        multistore: false
      }

      config.tax = {
        defaultCountry: 'US'
      }

      config.i18n = {
        defaultLocale: 'en-US',
        fullCountryName: 'United States',
        fullLanguageName: 'English'
      }

      config.elasticsearch = {
        index: 'vue_storefront_catalog'
      }
      config.defaultStoreCode = ''

      config.seo = {
        defaultTitle: 'Vue Storefront'
      }

      expect(await prepareStoreView(null)).toStrictEqual({
        tax: {
          defaultCountry: 'US'
        },
        i18n: {
          defaultLocale: 'en-US',
          fullCountryName: 'United States',
          fullLanguageName: 'English'
        },
        seo: {
          defaultTitle: 'Vue Storefront'
        },
        elasticsearch: {
          index: 'vue_storefront_catalog'
        },
        storeId: 1,
        storeCode: ''
      })
    })

    it('returns default storeView without setting defaultStoreCode when multistore mode is disabled', async () => {
      rootStore.state.storeView = {}
      rootStore.state.user = {}

      config.storeViews = {
        multistore: false,
        de: {
          storeId: 4
        }
      }

      config.tax = {
        defaultCountry: 'US'
      }

      config.i18n = {
        defaultLocale: 'en-US',
        fullCountryName: 'United States',
        fullLanguageName: 'English'
      }

      config.elasticsearch = {
        index: 'vue_storefront_catalog'
      }
      config.defaultStoreCode = 'de'

      config.seo = {
        defaultTitle: 'Vue Storefront'
      }

      expect(await prepareStoreView(null)).toStrictEqual({
        tax: {
          defaultCountry: 'US'
        },
        i18n: {
          defaultLocale: 'en-US',
          fullCountryName: 'United States',
          fullLanguageName: 'English'
        },
        seo: {
          defaultTitle: 'Vue Storefront'
        },
        elasticsearch: {
          index: 'vue_storefront_catalog'
        },
        storeId: 4,
        storeCode: ''
      })
    })

    it('returns default storeView with defaultStoreCode set when multistore mode is enabled', async () => {
      rootStore.state.storeView = {}
      rootStore.state.user = {}

      config.storeViews = {
        multistore: true,
        de: {
          storeId: 4
        }
      }

      config.tax = {
        defaultCountry: 'US'
      }

      config.i18n = {
        defaultLocale: 'en-US',
        fullCountryName: 'United States',
        fullLanguageName: 'English'
      }

      config.seo = {
        defaultTitle: 'Vue Storefront'
      }

      config.elasticsearch = {
        index: 'vue_storefront_catalog'
      }
      config.defaultStoreCode = 'de'

      expect(await prepareStoreView(null)).toStrictEqual({
        tax: {
          defaultCountry: 'US'
        },
        i18n: {
          defaultLocale: 'en-US',
          fullCountryName: 'United States',
          fullLanguageName: 'English'
        },
        seo: {
          defaultTitle: 'Vue Storefront'
        },
        elasticsearch: {
          index: 'vue_storefront_catalog'
        },
        storeId: 4,
        storeCode: 'de'
      })
    })

    it('returns storeView overwritting default store config values when multistore mode is enabled', async () => {
      rootStore.state.storeView = {}
      rootStore.state.user = {}

      config.storeViews = {
        multistore: true,
        de: {
          storeCode: 'de',
          storeId: 3,
          name: 'German Store',
          elasticsearch: {
            index: 'vue_storefront_catalog_de'
          },
          tax: {
            defaultCountry: 'DE'
          },
          i18n: {
            fullCountryName: 'Germany',
            fullLanguageName: 'German',
            defaultLocale: 'de-DE'
          },
          seo: {
            defaultTitle: 'Vue Storefront'
          }
        }
      }

      config.tax = {
        defaultCountry: 'US'
      }

      config.i18n = {
        defaultLocale: 'en-US',
        fullCountryName: 'United States',
        fullLanguageName: 'English'
      }

      config.seo = {
        defaultTitle: 'Vue Storefront'
      }

      config.elasticsearch = {
        index: 'vue_storefront_catalog'
      }
      config.defaultStoreCode = 'de'

      expect(await prepareStoreView(null)).toStrictEqual({
        tax: {
          defaultCountry: 'DE'
        },
        i18n: {
          fullCountryName: 'Germany',
          fullLanguageName: 'German',
          defaultLocale: 'de-DE'
        },
        seo: {
          defaultTitle: 'Vue Storefront'
        },
        elasticsearch: {
          index: 'vue_storefront_catalog_de'
        },
        storeId: 3,
        name: 'German Store',
        storeCode: 'de'
      })
    })

    it('returns storeView extending other storeView in multistore mode', async () => {
      rootStore.state.storeView = {}
      rootStore.state.user = {}

      config.storeViews = {
        multistore: true,
        de: {
          storeCode: 'de',
          storeId: 3,
          name: 'German Store',
          elasticsearch: {
            index: 'vue_storefront_catalog_de'
          },
          tax: {
            defaultCountry: 'DE'
          },
          i18n: {
            fullCountryName: 'Germany',
            fullLanguageName: 'German',
            defaultLocale: 'de-DE'
          },
          seo: {
            defaultTitle: 'Vue Storefront'
          }
        },
        it: {
          extend: 'de',
          storeCode: 'it',
          storeId: 4,
          name: 'Italian Store',
          elasticsearch: {
            index: 'vue_storefront_catalog_it'
          },
          tax: {
            defaultCountry: 'IT'
          },
          i18n: {
            fullCountryName: 'Italy',
            fullLanguageName: 'Italian',
            defaultLocale: 'it-IT'
          },
          seo: {
            defaultTitle: 'Vue Storefront'
          }
        }
      }

      config.tax = {
        defaultCountry: 'US'
      }

      config.i18n = {
        defaultLocale: 'en-US',
        fullCountryName: 'United States',
        fullLanguageName: 'English'
      }

      config.seo = {
        defaultTitle: 'Vue Storefront'
      }

      config.elasticsearch = {
        index: 'vue_storefront_catalog'
      }
      config.defaultStoreCode = 'it'

      expect(await prepareStoreView(null)).toStrictEqual({
        tax: {
          defaultCountry: 'IT'
        },
        i18n: {
          fullCountryName: 'Italy',
          fullLanguageName: 'Italian',
          defaultLocale: 'it-IT'
        },
        seo: {
          defaultTitle: 'Vue Storefront'
        },
        elasticsearch: {
          index: 'vue_storefront_catalog_it'
        },
        storeId: 4,
        extend: 'de',
        name: 'Italian Store',
        storeCode: 'it'
      })
    })
  })

  describe('adjustMultistoreApiUrl', () => {
    it('returns URL /test without storeCode as parameter', () => {
      rootStore.state.storeView = {
        storeCode: null
      }

      expect(adjustMultistoreApiUrl('/test')).toStrictEqual('/test')
    })

    it('returns URL /test with storeCode de as parameter', () => {
      rootStore.state.storeView = {
        storeCode: 'de'
      }

      expect(adjustMultistoreApiUrl('/test')).toStrictEqual('/test?storeCode=de')
    })

    it('returns URL /test?a=b with storeCode de as parameter and current parameters from the URL', () => {
      rootStore.state.storeView = {
        storeCode: 'de'
      }

      expect(adjustMultistoreApiUrl('/test?a=b')).toStrictEqual('/test?a=b&storeCode=de')
    })

    it('returns URL /test?a=b&storeCode=de with added storeCode at as parameter and removes previous storeCode parameter', () => {
      rootStore.state.storeView = {
        storeCode: 'at'
      }

      expect(adjustMultistoreApiUrl('/test?a=b&storeCode=de')).toStrictEqual('/test?a=b&storeCode=at')
    })

    it('returns URL /test?storeCode=de with changed storeCode at as parameter', () => {
      rootStore.state.storeView = {
        storeCode: 'at'
      }

      expect(adjustMultistoreApiUrl('/test?storeCode=de')).toStrictEqual('/test?storeCode=at')
    })

    it('returns URL /test?storeCode=de with changed storeCode at as parameter', () => {
      rootStore.state.storeView = {
        storeCode: 'at'
      }

      expect(adjustMultistoreApiUrl('/test?storeCode=de&storeCode=de')).toStrictEqual('/test?storeCode=at')
    })
  })

  describe('localizedDispatcherRoute', () => {
    it('URL /test stays the same', () => {
      config.storeViews = {}

      expect(localizedDispatcherRoute('/test', 'de')).toStrictEqual('/test')
    })

    it('URL /test starts with /de', () => {
      config.storeViews = {
        de: {
          appendStoreCode: true
        }
      }

      expect(localizedDispatcherRoute('/test', 'de')).toStrictEqual('/de/test')
    })

    it('URL /test?a=b&b=a stays the same', () => {
      config.storeViews = {}

      expect(localizedDispatcherRoute('/test?a=b&b=a', 'de')).toStrictEqual('/test?a=b&b=a')
    })

    it('URL /test?a=b&b=a starts with /de', () => {
      config.storeViews = {
        de: {
          appendStoreCode: true
        }
      }

      expect(localizedDispatcherRoute('/test?a=b&b=a', 'de')).toStrictEqual('/de/test?a=b&b=a')
    })

    it('URL with  LocalizedRoute object with fullPath test gets prefixed with /de', () => {
      config.storeViews = {}

      const LocalizedRoute: LocalizedRoute = {
        fullPath: 'test'
      }

      expect(localizedDispatcherRoute(LocalizedRoute, 'de')).toStrictEqual('/test')
    })

    it('URL with LocalizedRoute object with fullPath and parameter test stays the same', () => {
      config.storeViews = {}

      const LocalizedRoute: LocalizedRoute = {
        fullPath: 'test',
        params: {
          a: 'b',
          b: 'a'
        }
      }

      expect(localizedDispatcherRoute(LocalizedRoute, 'de')).toStrictEqual('/test?a=b&b=a')
    })

    it('URL with LocalizedRoute object with fullPath test gets prefixed with /de', () => {
      config.storeViews = {
        de: {
          appendStoreCode: true
        }
      }

      const LocalizedRoute: LocalizedRoute = {
        fullPath: 'test'
      }

      expect(localizedDispatcherRoute(LocalizedRoute, 'de')).toStrictEqual('/de/test')
    })

    it('URL with LocalizedRoute object with fullPath test and params gets prefixed with /de', () => {
      config.storeViews = {
        de: {
          appendStoreCode: true
        }
      }

      const LocalizedRoute: LocalizedRoute = {
        fullPath: 'test',
        params: {
          a: 'b',
          b: 'a'
        }
      }

      expect(localizedDispatcherRoute(LocalizedRoute, 'de')).toStrictEqual('/de/test?a=b&b=a')
    })
  })

  describe('setupMultistoreRoutes', () => {
    it('Add new routes for each store in mapStoreUrlsFor', () => {
      config.storeViews = {
        'de': {
          appendStoreCode: true
        },
        mapStoreUrlsFor: [
          'de'
        ],
        multistore: true
      }
      config.seo = {
        useUrlDispatcher: true
      }

      const routeConfig: RouteConfig[] = [
        {
          path: 'test'
        },
        {
          path: 'test2'
        }
      ]

      setupMultistoreRoutes(config, router, routeConfig)

      expect(router.addRoutes).toBeCalledTimes(1)
    })

    it('Do nothing as mapStoreUrlsFor is empty', () => {
      config.storeViews = {
        'de': {
        },
        mapStoreUrlsFor: []
      }

      const routeConfig: RouteConfig[] = [
        {
          path: 'test'
        },
        {
          path: 'test2'
        }
      ]

      setupMultistoreRoutes(config, router, routeConfig)

      expect(router.addRoutes).toBeCalledTimes(1)
    })
  })

  describe('localizedRoutePath', () => {
    it('add storeCode to route path with slash', () => {
      const storeCode = 'de'
      const path = '/test'

      expect(localizedRoutePath(path, storeCode)).toBe('/de/test')
    })

    it('add storeCode to route path without slash', () => {
      const storeCode = 'de'
      const path = 'test'

      expect(localizedRoutePath(path, storeCode)).toBe('/de/test')
    })

    it('add storeCode to route path with hash', () => {
      const storeCode = 'de'
      const path = '/test#test'

      expect(localizedRoutePath(path, storeCode)).toBe('/de/test#test')
    })
  })

  describe('localizedRouteConfig', () => {
    it('create new route object with storeCode', () => {
      const storeCode = 'de'
      const route = {
        path: '/test',
        name: 'test'
      }
      const expectedRoute = {
        path: '/de/test',
        name: 'de-test'
      }

      expect(localizedRouteConfig(route, storeCode)).toEqual(expectedRoute)
    })

    it('change only route name for child route', () => {
      const storeCode = 'de'
      const childRoute = {
        path: '/test2',
        name: 'test2'
      }
      const expectedRoute = {
        path: '/test2',
        name: 'de-test2'
      }

      expect(localizedRouteConfig(childRoute, storeCode, true)).toEqual(expectedRoute)
    })

    it('add localization for nested routes', () => {
      const storeCode = 'de'
      const route = {
        path: '/test',
        name: 'test',
        children: [
          {
            path: 'test2',
            name: 'test2',
            children: [
              {
                path: '/test3',
                name: 'test3'
              }
            ]
          }
        ]
      }
      const expectedRoute = {
        path: '/de/test',
        name: 'de-test',
        children: [
          {
            path: 'test2',
            name: 'de-test2',
            children: [
              {
                path: '/test3',
                name: 'de-test3'
              }
            ]
          }
        ]
      }

      expect(localizedRouteConfig(route, storeCode)).toEqual(expectedRoute)
    })
  })
})