Dynamic & Nested

動態 routes

變數網址：在 router 的網址，有個部份想要成為變數帶到 components裡的變數時。就要想起這個功能

javascript

在component設定template，要用$route.params物件的屬性帶出變數

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

在routes設定path，加上「:」就變成變數。

const routes = [
{ path: '/user/:id', component: User }
]

事件觸發

如果要在變化時做事件觸發，要加一個簡易的watch在components裡面。
為什麼要這麼做呢？為了達到高效能的程式行為，組件本身會重複利用，並不會重新建構、重新觸發事件。

const User = {
template: '...',
watch: {
  '$route' (to, from) {
    console.log(to, from); //就是可以hook的地方
  }
}
}

優先等級

誰先定義的，誰的優先級就最高。

Demo

User 1 User 2

巢狀式 routes

在一個vue 實例中，有一個component叫User。
而User會出現在< router-view>< /router-view>的位置。

javascript

如果我們希望User裡面，會再有router的效果，就是巢狀式的router。必須在User裡面，再放一個
< router-view>< /router-view>。


  const User = {
    template: `
      < div class="user">
        < h2>User {{ $route.params.id }}< /h2>
        < router-view>< /router-view>
      < /div>
    `
  }

設定子層routes，在routes物件裡，加上children

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 < router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 < router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

然後補上兩個children裡的components。


const UserProfile = {
  template: `UserProfile`
}

const UserPosts = {
  template: `UserPosts`
}

Demo

User 1 profile User 1 posts User 2 profile User 2 posts

指定< router-view>< /router-view>

在Vue router中，可以一個連結觸發多個components的渲染，首先要先將router-view命名

HTML 

      < router-view name="a">< /router-view>

並且在routes中，設計一個連結，多個components
沒有設定的，就都會被渲染成相同的components。指定名字的會渲染成指定的components

const routes = [
  { path: '',
    components: {
      default: news,
      a: sale
    }
  },
  //...
]