Two Path with same route and same component - Vue js

Question

I have two path with same component like this:

/:loc(\"-host\") - should match /usa-host

/:loc/:sublocation(\"-host\") - should match /

Answer 1

You can use alias of path

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

Check in doc

const Home = { template: '
Home
' }
const Project = { 
	template: '
Project {{id}}
',
  mounted(){
  	console.log(this.$route);
  },
  data: function () {
    return {
    	id:this.$route.params.id||'',
    }
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
  {
    path: '/',
    component: Home
  },
  {
    path: '/projects/:id?',
    component: Project,
    alias: '/project/:id'
  }
]
})

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

Home |
projects |
project/1

Also check fiddle : https://jsfiddle.net/nikleshraut/9sgk6yg4/1/

Note : Opening same component is not working by default, you need to use other trick. For just testing above fiddle, go home->/projects and home->/project/1 will work but /projects->/project/1 or /project/1->/projects will not work. To make it work do something like this : https://jsfiddle.net/nikleshraut/9sgk6yg4/