vue-router 2 template

Template for vue-router 2

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link :to="{name: 'foo'}">/foo</router-link>
  <router-link :to="{name: 'foo', params: {lang: 'en'}}">/en/foo</router-link>
  <router-view></router-view>
  <pre>{{$route.params}}</pre>
</div>

CSS

a.router-link-active {
  color: red;
}

JavaScript

const Foo = { template: `<div>Foo</div>` }

const router = new VueRouter({
  mode: 'history',
  base: '/',
  routes: [
  	{
    	path: '/:lang?',
      component: {
        render(c) {
          return c('router-view');
        },
      },
      children: [
       {
        name: 'foo',
       	path: 'foo',
        component: Foo
       }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
	if (!to.params.lang) {
    const route = { ...to };
    route.params = { ...route.params, lang: 'en'};
    next(route);
  } else {
		next();
  }
});

new Vue({
	router,
  el: '#app'
})