Vue之路由

Vue路由

路由的安裝

構建開發版

git clone https://github.com/vuejs/vue-... node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

路由基礎

<router-link to>與A標籤類似
.router-link-active 當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值

動態路由匹配

用：id 匹配
一個『路徑參數』使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，能夠在每一個組件內使用。
$$route.query匹配？後的值

匹配優先級

匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高

嵌套路由

在建立一個字節點
==注意==：定義子節點時父節點中添加
<router-view></router-view>

命名路由與命名視圖

都是用name：來命名
命名路由後引用應用

<router-link :to="{ name: 'user',  }}">User</router-link>

命名視圖
爲了能引用專門的路由

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

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

</script>

編程式的導航

• router.push(location)
  想要導航到不一樣的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，因此，當用戶點擊瀏覽器後退按鈕時，則回到以前的 URL。
• router.replace(location)它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄

重定向 (redirect)和 別名(alias)

導航鉤子

全局鉤子

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

to: Route: 即將要進入的目標 路由對象

from: Route: 當前導航正要離開的路由

next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

路由元信息

定義路由的時候能夠配置 meta 字段：
meta.requireLogin
http://git.oschina.net/hxj886...
http://git.oschina.net/hxj886...
http://git.oschina.net/hxj886...