設定路由高亮設定路由切換動效在路由規則中定義引數在規則中定義引數：

    { path: '/register/:id', component: register }

1. 通過 this.$route.params來獲取路由中的引數：

    var register = Vue.extend({
          template: '<h1>註冊元件 --- {{this.$route.params.id}}</h1>'
        });

使用 children 屬性實現路由巢狀

<div id="app">
  <router-link to="/account">Account</router-link>

  <router-view></router-view>
</div>

<script>
  // 父路由中的元件
  const account = Vue.extend({
    template: `<div>
      這是account元件
      <router-link to="/account/login">login</router-link> | 
      <router-link to="/account/register">register</router-link>
      <router-view></router-view>
    </div>`
  });

  // 子路由中的 login 元件
  const login = Vue.extend({
    template: '<div>登入元件</div>'
  });

  // 子路由中的 register 元件
  const register = Vue.extend({
    template: '<div>註冊元件</div>'
  });

  // 路由例項
  var router = new VueRouter({
    routes: [
      { path: '/', redirect: '/account/login' }, // 使用 redirect 實現路由重定向
      {
        path: '/account',
        component: account,
        children: [ // 通過 children 陣列屬性，來實現路由的巢狀
          { path: 'login', component: login }, // 注意，子路由的開頭位置，不要加 / 路徑符
          { path: 'register', component: register }
        ]
      }
    ]
  });

  // 建立 Vue 例項，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {
      account
    },
    router: router
  });
</script>

命名檢視實現經典佈局
標籤程式碼結構：

<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>
JS程式碼：

<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 建立路由物件
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
CSS 樣式：

<style>
  .header {
    border: 1px solid red;
  }

  .content{
    display: flex;
  }
  .sidebar {
    flex: 2;
    border: 1px solid green;
    height: 500px;
  }
  .mainbox{
    flex: 8;
    border: 1px solid blue;
    height: 500px;
  }
</style>