きほんしよう
html:

  
Hello App!
  

    
    
    
    Go to Foo
    Go to Bar
  
  
  
  

JavaScript:

// 0.            ，  Vue VueRouter，    Vue.use(VueRouter)

// 1.   （  ）  。
//         import   
const Foo = { template: '
foo
' }
const Bar = { template: '
bar
' }

// 2.     
//             。   "component"    
//    Vue.extend()         ，
//   ，          。
//            。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3.    router   ，    `routes`   
//            ,          。
const router = new VueRouter({
  routes // （  ）    routes: routes
})

// 4.         。
//       router         ，
//              
const app = new Vue({
  router
}).$mount('#app')

//   ，       ！

ルーティングにより、 this.$router を して のパスにアクセスするように、 のコンポーネントで this.$router を して ねることができます.

export default {
  computed: {
    username () {
      //          `params`    
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

ルーティングの

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

きルーティングにリンクするには、 router-linkのtoプロパティにオブジェクトを すことができます.

User

これはコード び し router.push() と じです.

router.push({ name: 'user', params: { userId: 123 }})

どちらの でも、ルーティングは /user/123パスにナビゲートされます.
リダイレクトとエイリアス

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

リダイレクトのターゲットは、 きルーティングであってもよい.

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

さらに、リダイレクトターゲットを に す もあります.

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

:/a の は /bであり、ユーザが /b にアクセスするとURLは /bに されるが、ルーティングマッチングは /aであり、ユーザが /a にアクセスするようにする.

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

「 」の により、 に されたネストされたルーティング ではなく、UI を のURLに にマッピングできます.
ルーティングコンポーネントパラメータprops
1:

const User = {
  template: '
User {{ $route.params.id }}
'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

2:

const User = {
  props: ['id'],
  template: '
User {{ id }}
'
}
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 }
    }
  ]
})

props は、 true , route.params は、コンポーネント として されます.
HTML 5 Historyモード

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

404エラーページ :

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

ルートメタ meta
ルーティングを するときは、 meta フィールドを できます.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

ルーティング

の い は、すべてのルーティング と じ を えます. ルーティングコンポーネントにそれぞれの を たせたい は、 ルーティングコンポーネント で を して、 なる nameを することができます.

const Foo = {
  template: `
    
      
...
    
  `
}

const Bar = {
  template: `
    
      
...
    
  `
}

active-class
リンクのアクティブ に するCSSクラス を します.デフォルト は、ルーティングの オプション linkActiveClass によってグローバルに することができる.

ネストされたルーティング

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
        }
      ]
    }
  ]
})

する / の にネストされたパスが . これにより、ネストされたパスを することなく、ネストされたコンポーネントを に できます.
プログラミングナビゲーション
router.push(...)

//    
router.push('home')

//   
router.push({ path: 'home' })

//      
router.push({ name: 'user', params: { userId: 123 }})

//      ，   /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

: された path , paramsは されます. の では query はこの ではありません. わりに の の では、ルーティングを する があります.name または きで なパラメータ きpath :

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

router.go(n)

//            ，    history.forward()
router.go(1)

//       ，    history.back()
router.go(-1)

//    3    
router.go(3)

//    history      ，        
router.go(-100)
router.go(100)

きビュー
ネストされたディスプレイではなく、 のビューを に( ) したい があります.たとえば、sidebar(サイドナビゲーション)とmain(メインコンテンツ)の2つのビューがあり、このとき きビューが ちます.インタフェースには、1つの だけではなく、 の に されたビューを つことができます.router-view に が されていない 、デフォルトは defaultです.

1つのビューは1つのコンポーネントでレンダリングされるため、 じルーティングで のビューに のコンポーネントが になります.components が しく されていることを します(s き):

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

ナビゲーションガード
グローバルガード router.beforeEachを して、グローバル・フロント・ガードを できます.

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

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

ガードメソッドごとに3つのパラメータが されます.

to: Route:アクセスするターゲットルーティングオブジェクト

from: Route: のナビゲーションが れようとするルーティング

next: Function:このフックをresolveするために、このメソッドを び す があります. はnextメソッドの び しパラメータに します.

next():パイプ の のフックを います.すべてのフックが されると、ナビゲーションの はconfirmed( された)になります.

next(false): のナビゲーションを します.ブラウザのURLが された (ユーザ またはブラウザ ボタンの があります)、URLアドレスはfromルーティングに するアドレスにリセットされます.

next('/')またはnext({ path: '/' }): なるアドレスにジャンプします. のナビゲーションが され、 しいナビゲーションが われます. の オブジェクトをnextに すことができ、replace:true、name:'home'などのオプションとrouter-linkで されるto propまたはrouterを することができます.pushのオプション.

next(error):(2.4.0+)nextに されたパラメータがErrorインスタンスである 、ナビゲーションは し、このエラーはrouter.onError()に されたコールバックに される.

nextメソッドが び されないようにしてください.そうしないと、フックは resolvedになりません.
グローバルバックフック
グローバルバックフックを することもできますが、ガードとは なり、これらのフックはnext を け れず、ナビゲーション を しません.

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

ルート のガード
ルーティング で beforeEnterガードを できます.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

これらのガードは、グローバルフロントガードの パラメータと じです.
コンポーネント のガード

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    //              confirm    
    //  ！ ！       `this`
    //         ，         
  },
  beforeRouteUpdate (to, from, next) {
    //        ，           
    //     ，              /foo/:id，  /foo/1   /foo/2        ，
    //          Foo   ，          。                。
    //          `this`
  },
  beforeRouteLeave (to, from, next) {
    //                
    //          `this`
  }
}

データ
あるルーティングに ると、サーバからデータを する がある があります.たとえば、ユーザ をレンダリングする は、サーバからユーザのデータを する があります.2つの で できます.

ナビゲーションが したら :ナビゲーションを し、 のコンポーネントライフサイクルフックでデータを します.データ に『ロード 』などの が されます.

ナビゲーションが する に :ナビゲーションが する に、ルーティングが ったガードでデータを し、データ に した にナビゲーションを する.

ナビゲーション のデータ

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    //           ，
    //    data     observed  
    this.fetchData()
  },
  watch: {
    //        ，        
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

ナビゲーションが する にデータを
このようにして,ナビゲーションが しいルーティングに する にデータを する. のコンポーネントのbeforeRouteEnter ガードでデータを することができ、データ に した 、next メソッドのみを び すことができる.

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  //      ，         
  //       
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

スクロール
フロントエンドルーティングを して、 しいルーティングに り えると、ページを ロードするように、ページを にスクロールしたり、 のスクロール を したりします.vue-routerは、ルーティング り え にページがどのようにスクロールするかをカスタマイズすることができます.
:この は、history.pushStateをサポートするブラウザでのみ できます.
Routerインスタンスを すると、scrollBehaviorメソッドを できます.

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return           
  }
})

scrollBehaviorメソッドは、toおよびfromルーティングオブジェクトを する.3 のパラメータsavedPosition は、ブラウザの / ボタンによってトリガーされた popstate がナビゲートされた にのみ である.
このメソッドは、スクロール のオブジェクト を します.

{ x: number, y: number }

{selector:string,offset?:{x:number,y:number}(offsetは2.6.0+でのみサポート)

falsy(falsyはfalseではありません.ここを )の を すか、 のオブジェクトを すと、スクロールは しません.
:

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

すべてのルーティングナビゲーションでは、ページを に にスクロールします. savedPositionに り、 / ボタンを すとブラウザのオリジナル のようになります.

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

「アンカーポイントにスクロール」の をシミュレートする は、 の に います.

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}