Vue-Router - 03 嵌套路線和動态跳轉

該篇涉及到 children，redirect，props，及動态跳轉

嵌套路線之children屬性

const RouterView = {
  render: (h)=>(h('router-view'))
}
const User = {
  template: `<div>
    這是User頁面元件
  </div>`
}

const Article = {
  template: `<div>
    這是Article頁面元件
  </div>`
}

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: RouterView,
    redirect: '/home/user'
    children: [
      {path: 'user', name: 'User', component: User},
      {path: 'article', name: 'Article', component: Article}
    ]
  }
]

const router = new VueRouter({
  routes
})
           

注意，如果要在一個路線内嵌套路線（并且表現為路線内的路線切換），children的path不能帶有 / 開頭，以它開頭的路線就表示相對頂級根路線，在這種情況下

渲染子路線由必須先渲染父路線元件，且父元件必須渲染 router-view 不然無法挂載子路線元件

重定向之redirect

{
  redirect: String | Function | Object  //(路由資訊，可帶參數)
}

//Object 例子
{
  name: 'someComponent' | path: 'url' //(選擇一個)
  // 注意 name 和 path 是隻有一個可以被比對，重定向無法傳參通過有params和query模式
}

//Function的例子
 const redirectFunction = (to) => {
  // 方法接收 目标路由 作為參數
  // return 重定向的 字元串路徑/路徑對象
}}
           

props

{
  props: Boolean  | Function | Object
}
           

• 如果 props 被設定為 true，route.params 将會被設定為元件屬性
• 如果 props 是一個對象，它會被按原樣設定為元件屬性。當 props 是靜态的時候有用。
• 你可以建立一個函數傳回 props

// 對象示例
{
  props: { newsletterPopup: false }
}
//注意這個props 你可以想象成 <router-view v-bind="props"> </router-view>
// 也許這樣你可能瞬間就對模糊的概念清晰了 props就是傳入元件的屬性值對象，即使是params和query也是這樣



//函數示例
{ 
  props: (route) => ({ q: route.query.q }) //傳回一個 props對象如上一條
}
           

動态跳轉

大家可以看到，我區分什麼是路線 route/routes，什麼是路由 router，路由相當于一個遙控器一樣，而路線是執行不同的功能，路由可以控制路線就像遙控器可以控制功能播放那個頻道的電視一樣

// 怎麼用代碼形式控制路由切換呢
router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()

router.push({
  name: '',
  query:{},
  params: {}
})
           

标簽式的動态比對

attributes	desc
to	目标資訊
tag	替換成的标簽，預設式a标簽
replace	<router-link :to="{ path: ‘/abc’}" replace></router-link> 模式變化
append	設定 append 屬性後，則在目前 (相對) 路徑前添加基路徑。例如，我們從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b，具體用法和replace相識
active-class	設定連結激活時使用的 CSS 類名。預設值可以通過路由的構造選項 linkActiveClass 來全局配置
exact	精準比對，預設是比對路線包含就激活，但是這個要精準
exact-active-class	配置當連結被精确比對的時候應該激活的 class。注意預設值也是可以通過路由構造函數選項 linkExactActiveClass 進行全局配置的