https://router.vuejs.org/zh-cn/

安裝

模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

 <!-- 使用 router-link 組件來導航. -->
 <!-- 通過傳入 `to` 屬性指定鏈接. -->
 <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
 <router-link to="/foo">Go to Foo</router-link>

<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
<!--自動設置 class 屬性值 .router-link-active-->

動態路由匹配

『動態路徑參數』（dynamic segment）

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

/user/foo 和 /user/bar 都將映射到相同的路由

<router-link to="/user/foo">/user/foo</router-link>
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
// foo

/user/:username/post/:post_id
/user/evan/post/123 
{ username: 'evan', post_id: 123 }

嵌套路由

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

以 / 開頭的嵌套路徑會被當作根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑

編程式的導航

router.push(location, onComplete?, onAbort?)

在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

//它不會向 history 添加新記錄,替換掉當前的 history 記錄
router.replace(location, onComplete?, onAbort?)

<router-link :to="..." replace> 
router.replace(...)

//參數是一個整數
//意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。
router.go(n)

命名路由

name

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
//
router.push({ name: 'user', params: { userId: 123 }})

命名視圖

router-view 沒有設置名字，那么默認為 default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向 和 別名

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

//命名路由
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

別名

/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

路由組件傳參

使用props解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }

    // 對于包含命名視圖的路由，你必須分別為每個命名視圖添加props選項：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

HTML5 History 模式

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。
history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。需要后臺配置支持

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

導航守衛

路由元信息

定義路由的時候可以配置 meta 字段

過渡動效

<transition>
  <router-view></router-view>
</transition>

數據獲取

導航完成后獲取數據

// replace getPost with your data fetching util / API wrapper
替換getPost用你自己的數據fetching工具或API 包

在導航完成前獲取數據

滾動行為

這個功能只在 HTML5 history 模式下可用。

mode:'history'

懶加載

使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。

const Foo = () => import('./Foo.vue')

api