JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<div id="app">
  <ul>
    <li><router-link :to="{ name: 'MyComponentName', params: { justSomeNumber: 1 } }">MyComponent - 1</router-link></li>
    <li><router-link :to="{ name: 'MyComponentName', params: { justSomeNumber: 2 } }">MyComponent - 2</router-link></li>
    <li><router-link :to="{ name: 'MyOtherComponentName', params: { justSomeNumber: 1 } }">MyOtherComponent - 1</router-link></li>
    <li><router-link :to="{ name: 'MyOtherComponentName', params: { justSomeNumber: 2 } }">MyOtherComponent - 2</router-link></li>
  </ul>
  <hr>
  <router-view></router-view>
</div>

JavaScript

const router = new VueRouter({
  routes: [
  	{
      path: '/',
      component: {
        template: `
          <div>Index</div>
        `
      }
    }, {
      name: 'MyComponentName',
      path: '/MyComponent/:justSomeNumber',
      component: {
        template: `
          <div>
            <h1>MyComponent</h1>
            <div>{{ $route.params.justSomeNumber }}</div>
            <ul>
            	<li><router-link :to="{ name: 'MyOtherComponentName' }">MyOtherComponent - implicit</router-link></li>
            	<li><router-link :to="{ name: 'MyOtherComponentName', params: { justSomeNumber: 1 } }">MyOtherComponent - 1</router-link></li>
              <li><router-link :to="{ name: 'MyOtherComponentName', params: { justSomeNumber: 2 } }">MyOtherComponent - 2</router-link></li>
            </ul>
          </div>
        `
      }
    }, {
      name: 'MyOtherComponentName',
      path: '/MyOtherComponent/:justSomeNumber',
      component: {
        template: `
					<div>
						<h1>MyOtherComponent</h1>
            <div>{{ $route.params.justSomeNumber }}</div>
						<ul>
            	<li><router-link :to="{ name: 'MyComponentName' }">MyComponent - implicit</router-link></li>
            	<li><router-link :to="{ name: 'MyComponentName', params: { justSomeNumber: 1 } }">MyComponent - 1</router-link></li>
              <li><router-link :to="{ name: 'MyComponentName', params: { justSomeNumber: 2 } }">MyComponent - 2</router-link></li>
            </ul>
					</div>
				`
      }      
    }    
    
  ]
})

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