vue-router的使用

vue-router的使用

已經知道vue.js經過將組件進行組合，能夠作成應用程序。而且經過將vue.js和vue-router的組合能夠實現單頁應用，用戶體驗佳，實現單頁應用，就是將組件映射到路由，而且告訴路由要在哪裏渲染特定的組件

可使用簡單的例子進行說明

• html部分

< div>
  < p>
    < !-- 使用 router-link 組件來導航. -->
    < !-- 經過傳入 `to` 屬性指定連接. -->
    < !--  默認會被渲染成一個 `< a>` 標籤 -->
    < router-link to="/apple">Go to Apple< /router-link>
    < router-link to="/banana">Go to Banana< /router-link>
  < /p>
  < !-- 路由出口 -->
  < !-- 路由匹配到的組件將渲染在這裏 -->
  < router-view>< /router-view>
< /div>
複製代碼

在vue-router中，使用< router-link>來進行導航，用其to屬性指定連接實現路由跳轉。可是在渲染的時候< router-link>會被解析爲< a>標籤。 < router-view>< /router-view>是用做渲染路由匹配到的組件

• JavaScript部分

// 1. 定義（路由）組件。
// 能夠從其餘文件 import 進來
const apple = { template: '< div>Apple< /div>' }
const banana = { template: '< div>Banana< /div>' }

// 2. 定義路由
// 每一個路由應該映射一個組件。 其中"component" 能夠是
// 經過 Vue.extend() 建立的組件構造器，
// 或者，只是一個組件配置對象。
const routes = [
  { path: '/apple', component: apple },
  { path: '/banana', component: banana }
]

// 3. 建立 router 實例，而後傳 `routes` 配置
const router = new VueRouter({
  routes // 至關於 routes: routes
})

// 4. 建立和掛載根實例。
// 記得要經過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
})
複製代碼

注：當 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active，能夠利用此特性完成選擇路由後的高亮效果！

經過注入路由器，咱們能夠在任何組件內經過 this.router 訪問當前路由

動態路由匹配

咱們常常須要把某種模式匹配到的全部路由，全都映射到同個組件。例如，咱們有一個 User 組件，對於全部 ID 各不相同的用戶，都要使用這個組件來渲染。那麼，咱們能夠在 vue-router 的路由路徑中使用「動態路徑參數」(dynamic segment) 來達到這個效果：

const User = {
  template: '< div>User< /div>'
}
const router = new VueRouter({
  routes: [
    // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})
複製代碼

/user/foo 和 /user/bar 都將映射到相同的路由。一個「路徑參數」使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到this.$route.params，能夠在每一個組件內使用

響應路由參數的變化

當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。複用組件時，想對路由參數的變化做出響應的話，你能夠簡單地 watch (監測變化) $route 對象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }
  }
}
//或者使用beforeRouteUpdate 守衛
const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
複製代碼

路由的嵌套

實際生活中的應用界面，一般由多層嵌套的組件組合而成。一樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，

< div id="app">
  < router-view>< /router-view>
< /div>
複製代碼

const User = {
  template: '< div>User {{ $route.params.id }}< /div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
複製代碼

這裏的 是最頂層的出口，渲染最高級路由匹配到的組件。一樣地，一個被渲染組件一樣能夠包含本身的嵌套 。例如，在 User 組件的模板添加一個 ：

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

要在嵌套的出口中渲染組件，須要在 VueRouter 的參數中使用 children 配置：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功，
          // UserProfile 會被渲染在 User 的  中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的  中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})
複製代碼

!!注意： 要注意，以 / 開頭的嵌套路徑會被看成根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。你會發現，children 配置就是像 routes 配置同樣的路由配置數組，因此呢，你能夠嵌套多層路由。此時，基於上面的配置，當你訪問 /user/foo時，User的出口是不會渲染任何東西，這是由於沒有匹配到合適的子路由。若是你想要渲染點什麼，能夠提供一個 空的 子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 當 /user/:id 匹配成功，
        // UserHome 會被渲染在 User 的  中
        { path: '', component: UserHome },

        // ...其餘子路由
      ]
    }
  ]
})
複製代碼