最近學習到VUE路由這塊，發現這塊知識點有點多，好容易混亂，我的學習習慣就是先要建立框架，然後再去挨個學習搞懂，所以先來把概念搞搞清楚再說。

首先，我們要知道VUE路由建立的是單頁面路由。

子路由其實和單路由意思是一樣的，單路由應該很好理解，因為我們都知道路由是可以一層一層巢狀的，你可以想象一下俄羅斯套娃，就是一個套一個的這種感覺，而裡面那個都會一直被外面一個包含著。所以單路由的意思就是隻有一層唄，放在介面中應該是這樣的。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>
 

router-view中載入的元件裡不包含router-view標籤，這就是單路由啦，單路由應該是我們使用的最簡單的一種路由吧。

講到這裡，順便把巢狀路由也一起理解了吧，巢狀路由就是一層一層巢狀的路由，啥意思呢，我們都知道路由的入口是router-view，每一個router-view標籤就相當於元件的最外層框架，那麼一層一層巢狀主要就是指router-view標籤的巢狀，大概就是下面這種結構，僅僅是個示意哈~

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view>
     <div></div>
     <router-view>
          <div></div>
          <div></div>
          <router-view></router-view>
     </router-view>
  </router-view>
</div>
 

這裡只是示意一下最終渲染出來的結果，第一層router-view中載入的元件中也包含一個router-view,第二個router-view元件中渲染的元件中也包含一個router-view,從而實現層層巢狀。

所以可以說單路由是巢狀路由的一種，不過它只有一層罷了。

動態路由，路勁可以動態變更，比如前面我們接觸的路徑都是寫死的，但有時候我們想根據不同的引數載入不同的元件，使用以下形式來實現。

比如我們可以根據username的值不同，來載入不同的元件，也可以不同的username值載入同一個元件，都是OK的。

  基本用法如下：

const User = {
  template: '<div>User{{$route.param.id}}</div>'
}

const router = new VueRouter({
  routes: [
    // 動態路徑引數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})

那麼多路由又是什麼呢？

在一個介面中只有一個路由入口，叫單路由，那麼有多個路由入口，叫啥？於是起了個名 叫多路由，那你可能要問了，這些路由怎麼區分呢，起個名兒不就行啦，多路由類似於下面這種格式，要和巢狀路由區分開哦，一個是俄羅斯套娃，一個是排排坐。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>