# [Vue cli] Vue router路由配置
###### tags: `Vue.js`

## 新增路由路徑及連結

<ul  class="navbar-nav mr-auto">
          <li  class="nav-item ">
            <router-link  class="nav-link" :to="{name:'HelloWorld'}">Hello</router-link  >
          </li>
          <li  class="nav-item ">
            <router-link  class="nav-link"  to="/Page">Page</router-link  >
          </li>
        </ul>

其中程式碼中 router-link 是切換路由的標籤，可以直接給定定義好的完整 url ，如 to="/Page"，或者給定定義的命名好的路由物件 :to="{name:‘HelloWorld’}"，注意傳物件的時候要加上 v-bind。

除了聲明式外，也可在程式中利用 this.$router.push('/Page'); 或 this.$router.push('{name:'HelloWorld'}'); 進行跳轉，需注意的是，在實務中要使用文件所提到 method ，如：router.push，需加上前綴變成 this.$router.push 才能成功調用。

<font color="red">比起傳送完整的 url ，個人更喜歡傳送路由物件，可讀性更高，程式維護起來也比較容易</font>，尤其當還需要傳遞 params 與 query 時，還可以避免做字串串接。

## router-view顯示配置說明

<router-view></router-view>

<router-view>放置在Dashboard下指定區域，跳轉並顯示各個vue元件的畫面（children內的子元件），只要在index.js內的路徑依附在Dashboard陣列內即可。

path:'/admin',
name:'Dashboard',
component: Dashboard,
children:[
    {   path:'products', //巢狀http://admin/products
        name:'products',
        component: Products,
        meta: { requiresAuth: true },
    },

    {   path:'orders', //巢狀http://admin/orders
        name:'orders',
        component: Order,
    },

## 使用動態路由切換頁面 Ajax 結果

以博客來為例，在商品介紹頁中皆使用了相同版型，並仔細觀察相對應的網址，可以發現網址皆為 https://www.books.com.tw/products/商品ID 的樣式。在 Vue 中這樣的情況可以採用動態路由來實做，將符合 products/:id 這樣的路由，全導向特定商品介紹的元件，而實際載入的商品資料由 id 來控制。

 created(){
  const id = this.$route.params.id;
  this.$http.get(`https://randomuser.me/api/?seed=${id}`).then((res)=>{
    const  personalData  =  res.data.results[0];
    this.name  =  personalData.name;
      })
    },

`https://randomuser.me/api/?seed=${id}` 這是由 randomuser 所提供的 API ，給定一個 seed 後，會回傳特定使用者資料，而所送出的 seed 是取自 `this.$route.params.id `，也就是 url 匹配所定義的匹配模式後，所得到的路徑參數路徑參數 。

this.$http.get 是一個非同步的動作，最終取得一個 Promise ，必須再呼叫 then 將個人資料取出放入變數，最終將變數在 UI 中呈現。

總結：在router先設定:id做動態路由，再到指定Vue元件以params公式來取得動態id的資料，再依照API指示post至後端資料庫。

## 命名路由，同一個路徑載入兩個頁面元件

如果時候想同時（同級）展示多個元件，例如建置一個 layout 時，會存在 sidebar 、 header 、 footer …等元件，這時可以使用命名路由來載入，即在 layout 中添加命名 router-view。一般來說，如果router-view沒有設置名字，那麼預設為 default。命名則需加入name="名稱"就可跟預設做區隔。

<template>
  <div  class="hello">
    <router-view  name="menu"></router-view>
    <div  class="card"  style="width: 18rem;">
      <router-view></router-view>
    </div>
  </div>
</template>

並在 router 設定相對定的設置。一個路由若要選染多個元件，並需改用 components（有 s），預設元件放置default，命名的部分則寫入vue元件裡的router-view的名稱，及router支援的import路徑名稱

{
  name:  "Page",
  path:  "/Page",
  components: {
    default: Page,
    menu: menuComponent,
  },
  children:[...]
}