title: Vue i18n - adding locale to the URL using routerview
body: <p>I am using a scafolded AspNetCore 2.1 site with VueJS using TypeScript.
  I'm trying to integrate the <a href="http://kazupon.github.io/" rel="noreferrer">kazupon i18n</a> plugin with the router-view. Without the URL integration, it works just fine.</p>
  
  <p>I am not able to get the proper redirects working like <code>http://localhost/en/product</code> and <code>http://localhost/fr/product</code></p>
  
  <p>This is the initial <code>boot.ts</code>, that uses <code>VueI18n</code></p>
  
  <pre><code>import Vue from 'vue';
  import VueRouter from 'vue-router';
  import VueI18n from 'vue-i18n'
  
  Vue.use(VueRouter);
  Vue.use(VueI18n);
  
  import { messages, defaultLocale } from './lang/i18n';
  
  const i18n = new VueI18n({
      locale: defaultLocale,
      fallbackLocale: 'en',
      messages
  })
  
  const routes = [
          { path: '/', component: require('./components/home/home.vue.html') },
          { path: '/product', component: require('./components/product/product.vue.html') },
  ];
  
  const router = new VueRouter({
      mode: 'history',
      routes: routes
  });
  
  new Vue({
      el: '#app-root',
      router: router,
      i18n: i18n,
      render: h =&gt; h(require('./components/app/app.vue.html'))
  });
  </code></pre>
  
  <p>So far I have tried prefixing <code>routes</code> but it just breaks the functionality:</p>
  
  <pre><code>const routes = [{
      path: '/',
      redirect: `/${defaultLocale}`,
  },
  {
      path: '/:locale',
      children: [
          { path: '/', component: require('./components/home/home.vue.html') },
          { path: '/counter', component: require('./components/product/product.vue.html') },
      ]
  }];
  </code></pre>
  
  <p>I've also tried relying on <code>router.beforeEach</code> to set the locale. </p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt; {
      let language = to.params.locale;
      if (!language) {
          language = 'en';
      }
  
      i18n.locale = language;
      next();
  });
  </code></pre>
  
  <p>This does not function either.</p>
  
  <p>I've drawn inspiration from <a href="https://github.com/ashour/vuejs-i18n-demo" rel="noreferrer">github.com/ashour/vuejs-i18n-demo</a> and <a href="https://stackoverflow.com/questions/41953836/vue-i18n-sap-multilingual-best-practice">vue-i18n-sap-multilingual-best-practice</a>, but it seems that during the i18n migration, some samples may have been obsolete or lost and those use-cases no longer function.</p>