matthieu-D

const routes = [
  {
    path: "/about/create",
    component: About
  },
  {
    path: "/about/:id",
    component: About
  }
];

matthieu-D

  <div id="app">
    <router-link to="/parent">Go to the nested part</router-link>
    
    <router-view></router-view>
  </div>

matthieu-D

const FirstChild = {
  template: "<div>Hi I'm the first child</div>"
};

const SecondChild = {
  template: "<div>Hi I'm the second child</div>"
};

const ParentComponent = {
  template: `<div>

matthieu-D

  <div id="app">
    <router-link :to="{name: 'white'}">Go to the same named route</router-link>
    
    <router-view></router-view>
  </div>

matthieu-D

const NamedRoute = {
  template: "<div>Named route content</div>"
};

matthieu-D

const routes = [
  {
    path: "/black",
    name: "white",
    component: NamedRoute
  }
];

matthieu-D

const routes = [
  {
    path: "/contact/:id",
    component: Contact,
    props: true
  }
];

matthieu-D

const Contact = {
  props: ["id"],
  template: "<div>Contact view</div>",
  mounted: function() {
    console.log("Welcome to the Contact view");
    const userId = this.id;

    if (userId) {
      console.log("You are viewing the user", userId);
    }

matthieu-D

const routes = [
  {
    path: "/about/:id",
    component: About
  }
];

matthieu-D

const About = {
  template: "<div>About view</div>",
  mounted: function() {
    console.log("Welcome to the About view");
    const userId = this.$route.params.id;

    if (userId) {
      console.log("You are viewing the user:", userId);
    }
  },