Q:

How to add a route in vue.js

I'm a newbie in javascript and vue.js and I'm facing some issue when trying to add a new route in an existing programme.
I created my new component in a separate file called Miniature.vue
I added the new route in the router definition:
  export default new Router({
  routes: [
    {
      path: '/certificat/:id',
      name: 'Certificat',
      component: Certificat
    },
    {
      path: '/miniature/:id',
      name: 'Miniature',
      component: Miniature
    }
  ]
})

And then, in the vue instantiation, I added my new components and updated the template : 
new Vue({
el: '#app',
router,
components: { Certificat, Miniature } ,
template: '<div>
            <Certificat></Certificat>
            <Miniature></Miniature>
            </div>'
})

The previous template was simply 
template: '<Certificat/>'

Problem is, the url is either mywebsite/certificat/123 or  mywebsite/miniature/123, both routes are executed, and my two components are displayed !
What is the purpose of the template in the Vue constructor anyway? If I remove it, nothing happens.
What am I missing here ??

A:

Those components are supposed to be loaded from your route, so they shouldn't be in your app template (i.e., they should be removed from #app's components and template).
Your app should contain <router-view> somewhere for the route to be rendered. In your case, replace the app template string with <router-view/>.
It should look similar to this:
new Vue({
  el: '#app',
  router,
  template: '<router-view/>'
})

I should mention your router setup is missing a route for / and 404, so the default path and unknown routes will render nothing in your app. Users would have to navigate to the exact routes you've configured to see anything.

