v2.x 以前のドキュメントです。 v3.x のドキュメントを見たい場合はこちら

Vue Router 0.7.x からの移行

最終更新日: 2019年5月8日

Vue Router 2.0 は Vue 2.0 に対応する唯一のルータなので、 Vue を更新する場合には Vue Router も同様に更新する必要があります。2.0 のドキュメントに移行ガイドが用意されているのもそういう理由からです。新しい Vue Router を用いた包括的なドキュメントは Vue Router ドキュメントを確認してください。

ルータの初期化

router.start ^置き換え

Vue Router でアプリケーションを初期化するための特別な API はなくなりました。以下の代わりに:

router.start({
  template: '<router-view></router-view>'
}, '#app')

Vue インスタンスに router プロパティを渡すだけです:

new Vue({
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
})

または、Vue のランタイムのみのビルドを使用している場合は:

new Vue({
  el: '#app',
  router: router,
  render: h => h('router-view')
})

ルートの定義

router.map ^置き換え

ルートは routes オプション に配列として定義されるようになりました。例えばこのようなルートの記述は:

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

このように記述するようになります:

var router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

オブジェクトの反復走査はプロパティの順序にブラウザ毎の一貫性がないため、配列による記法を用いることで、より予測可能なルートのマッチングを実現しています。

router.on ^削除

アプリケーションの開始時に、機械的にルートを生成する必要がある場合、ルートの配列に対し動的に定義を追加することができます。例えば次のような形です:

// 通常のルート定義
var routes = [
  // ...
]

// 動的に生成されるルート定義
marketingPages.forEach(function (page) {
  routes.push({
    path: '/marketing/' + page.slug
    component: {
      extends: MarketingComponent
      data: function () {
        return { page: page }
      }
    }
  })
})

var router = new Router({
  routes: routes
})

ルータが初期化された後に新しいルートを追加する必要がある場合、加筆された新しいルート機構で、既存のものを置き換えることができます。

router.match = createMatcher(
  [{
    path: '/my/new/path',
    component: MyComponent
  }].concat(router.options.routes)
)

router.beforeEach ^変更

router.beforeEach は現在非同期に動作し、3番目の引数として next 関数を取ります。

router.beforeEach(function (transition) {
  if (transition.to.path === '/forbidden') {
    transition.abort()
  } else {
    transition.next()
  }
})

router.beforeEach(function (to, from, next) {
  if (to.path === '/forbidden') {
    next(false)
  } else {
    next()
  }
})

subRoutes ^名前変更

Vue と他のルータライブラリとの一貫性のために、childrenに名前が変更されました。

router.redirect ^置き換え

ルート定義におけるオプション として記述するようになりました。よって、例えば次のような例は:

router.redirect({
  '/tos': '/terms-of-service'
})

routes 設定内にて次のように記述します:

{
  path: '/tos',
  redirect: '/terms-of-service'
}

router.alias ^置き換え

ルート定義におけるオプション として記述するようになりました。よって、例えば次のような例は:

router.alias({
  '/manage': '/admin'
})

routes 設定内にて次のように記述します:

{
  path: '/admin',
  component: AdminPanel,
  alias: '/manage'
}

複数のエイリアスが必要な場合、配列記法を用いることができます。

alias: ['/manage', '/administer', '/administrate']

任意のルートプロパティ ^置き換え

将来の機能との競合を避けるために、任意のルートプロパティのスコープを新しいメタプロパティの下に設定する必要があります。例えば、次のように定義したとします:

'/admin': {
  component: AdminPanel,
  requiresAuth: true
}

次に、それを次のように更新します:

{
  path: '/admin',
  component: AdminPanel,
  meta: {
    requiresAuth: true
  }
}

その後、ルート上でこのプロパティにアクセスすると、メタを通過します。例えば:

if (route.meta.requiresAuth) {
  // ...
}

[]クエリ内配列のための構文 ^削除

クエリパラメータに配列を渡すとき QueryString の構文はもはや /foo?users[]=Tom&users[]=Jerry ではなく、その代わり、新しい構文は /foo?users=Tom&users=Jerry となりました。 内部的には、 $route.query.users は以前として配列ですが、 もしクエリ内にパラメータが1個で: /foo?users=Tom 、このルートに直接アクセスしたとき、ルータは users を配列として期待しているかどうかを知る方法がありません。そのため、算出プロパティを追加し、 $route.query.users
の全ての参照をそれに置き換えることを検討してください:

export default {
  // ...
  computed: {
    // users は常に配列となります
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}

ルートのマッチング

より柔軟性を高めるために、ルートのマッチングの内部処理には、 path-to-regexp が利用されるようになりました。

1つ以上の名前付きパラメータ

構文に多少の変化があります。例えば /category/*tags は /category/:tags+ に変更する必要があります。

リンク

v-link ^置き換え

Vue 2.0 におけるコンポーネントの機能の一環として、v-link ディレクティブは新しく <router-link> コンポーネント に置き換えられました。以下のような形で記述されたリンクは:

<a v-link="'/about'">About</a>

次のように変更しなければなりません:

<router-link to="/about">About</router-link>

<router-link> では target="_blank" はサポートされいないことに注意してください。新しいタブでリンクを開く必要がある場合は、<a> を代わりに使用しなければなりません。

v-link-active ^置き換え

<router-link> コンポーネント でタグの指定が可能なため、 v-link-active ディレクティブは廃止されました。よって、例えば次のような例は:

<li v-link-active>
  <a v-link="'/about'">About</a>
</li>

このような形になります:

<router-link tag="li" to="/about">
  <a>About</a>
</router-link>

<a> が実際のリンクとなり (正しい href をもっています), active クラスは外側の <li> に付与されます。

動的なナビゲーション

router.go ^変更

HTML5 History API と一貫性を保つために、router.go は戻る/進むナビゲーションのために使用されます。router.push は特定のページに移動するために使用されます。

ルータオプション: モード

hashbang: false ^削除

Google にURL をクロールさせるために Hashbangs を用いる必要はもはやなくなりました。よってハッシュの方式としてデフォルトではなくなり、オプションとして利用できなくなりました。

history: true ^置き換え

ルーティングの動作に関するオプションは mode オプション にまとめられました。このような記述は:

var router = new VueRouter({
  history: 'true'
})

次のように変更しなければなりません:

var router = new VueRouter({
  mode: 'history'
})

abstract: true ^置き換え

ルーティングの動作に関するオプションは mode オプション にまとめられました。このような記述は:

var router = new VueRouter({
  abstract: 'true'
})

次のように変更しなければなりません:

var router = new VueRouter({
  mode: 'abstract'
})

その他のルートオプション

saveScrollPosition ^置き換え

関数を受け付ける scrollBehavior オプション に変更されました。スクロールの挙動は、ルートごとに完全にカスタマイズ可能になりました。これによってより多くの可能性がひらかれましたが、単に以前の挙動を再現したい場合もあるでしょう。これまで、次のように記述していた所は:

saveScrollPosition: true

このように変更すれば、同じ動作が保たれます:

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

root ^名前変更

HTML の <base> 要素と合わせるため base に名称変更されました。

transitionOnLoad ^削除

Vue のトランジション機能に、appear トランジションの制御 が実装されたため、このオプションはもはや不要になりました。

suppressTransitionError ^削除

フックをよりシンプルにするために削除されました。どうしてもトランジションのエラーを抑制しなければならない場合 try…catch 構文を代わりに使用してください。

ルートフック

activate ^置き換え

代わりにコンポーネントにて beforeRouteEnter を使用してください。

canActivate ^置き換え

代わりに、ルート内で beforeEnter を使用してください。

deactivate ^削除

代わりに、コンポーネントにて beforeDestroy を使用するか destroyed フックを使用するようにしてください。

canDeactivate ^削除

代わりに、コンポーネント内で beforeRouteLeave を使用してください。

canReuse: false ^削除

新しい Vue Router ではこれを使用する場面は無いでしょう。

data ^置き換え

$route プロパティは常にリアクティブなため、ルートの変更は次のようにウォッチ機能を利用する事で検出できます:

watch: {
  '$route': 'fetchData'
},
methods: {
  fetchData: function () {
    // ...
  }
}

$loadingRouteData ^削除

独自のプロパティを定義し (例えば isLoading), ルートのウォッチャーでローティングの状態を更新してください。例えば axiosのデータを取り込む場合、次のような例になります:

data: function () {
  return {
    posts: [],
    isLoading: false,
    fetchError: null
  }
},
watch: {
  '$route': function () {
    var self = this
    self.isLoading = true
    self.fetchData().then(function () {
      self.isLoading = false
    })
  }
},
methods: {
  fetchData: function () {
    var self = this
    return axios.get('/api/posts')
      .then(function (response) {
        self.posts = response.data.posts
      })
      .catch(function (error) {
        self.fetchError = error
      })
  }
}