title: Prefix routes with locale in vue.js (using vue-i18n)
body: <p>I have a <code>locale.js</code> file which is responsible for defining user locale. Here it is:</p>
  
  <pre><code>import store from '@/vuex/index'
  
  let locale
  
  const defaultLocale = 'en_US'
  
  if (store.getters['auth/authenticated']) {
    locale = store.getters['auth/currentUser'].locale || defaultLocale
  } else {
    if (localStorage.getItem('locale')) {
      locale = localStorage.getItem('locale')
    } else {
      locale = defaultLocale
    }
  }
  
  export default locale
  </code></pre>
  
  <p>Also I have a <code>i18n.js</code> file which is responsible for making <code>i18n</code> instance which I use when I init my app.</p>
  
  <pre><code>import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  import locale from '@/services/locale'
  
  Vue.use(VueI18n)
  
  const fallbackLocale = 'en_US'
  
  let i18n = new VueI18n({
    locale,
    fallbackLocale,
  })
  
  i18n.setLocaleMessage('ru_RU', require('@/lang/ru_RU.json'))
  i18n.setLocaleMessage('en_US', require('@/lang/en_US.json'))
  
  export { i18n }
  </code></pre>
  
  <p>Now I think that it'd be more convenient to have URLs prefixed with locale, like <code>/en/profile</code> or <code>/ru/profile</code>. This way I can share a link with locale which would be already set.</p>
  
  <p>Not sure how do to this though. Making all routes child and put <code>/:locale?</code> is not that convenient because router is not yet initialized (I pass <code>i18n</code> and <code>router</code> instances simultaneously when initing root app instance).</p>
  
  <p>How can I achieve that, what would be the best approach?</p>