Vue Router 0.7.x からの移行

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.start がコールされる箇所を検出してください。

ルートの定義

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.map がコールされる箇所を検出してください。

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.on がコールされる箇所を検出してください。

subRoutes 名前変更

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

移行ガイド

コードに対し移行ヘルパー を実行し subRoutes がコールされる箇所を検出してください。

router.redirect 置き換え

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

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

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

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

移行ガイド

コードに対し移行ヘルパー を実行しrouter.redirect がコールされる箇所を検出してください。

router.alias 置き換え

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

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

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

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

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

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

移行ガイド

コードに対し 移行ヘルパー を実行し router.alias がコールされる箇所を検出してください。

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

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

'/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+ に変更する必要があります。

移行ガイド

コードに対し 移行ガイド を実行し廃止された文法を利用している箇所を検出してください。

リンク

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 ディレクティブが使用されている箇所を検出してください。

<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> に付与されます。

移行ガイド

コード上で 移行ガイド を実行し v-link-active ディレクティブが使用されている箇所を検出してください。

動的なナビゲーション

router.go 変更

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

移行ガイド

コードに対し 移行ヘルパー を実行し router.push の代わりに使用される router.go がコールされる箇所を検出してください。

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

hashbang: false 削除

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

移行ガイド

コードに対し 移行ヘルパー を実行し hashbang: false オプションが利用されている箇所を検出してください。

history: true 置き換え

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

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

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

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

移行ガイド

コードに対し 移行ヘルパー を実行し history: true オプションが使用されている箇所を検出してください。

abstract: true 置き換え

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

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

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

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

移行ガイド

コードに対し 移行ヘルパー を実行し abstract: true オプションが使用されている箇所を検出してください。

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

saveScrollPosition 置き換え

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

saveScrollPosition: true

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

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

移行ガイド

コードに対し 移行ヘルパー を実行し saveScrollPosition: true オプションを使用している箇所を検出してください。

root 名前変更

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

移行ガイド

コードに対し 移行ヘルパー を実行し root オプションを使用している箇所を検出してください。

transitionOnLoad 削除

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

移行ガイド

コードに対し 移行ヘルパー を実行し transitionOnLoad: true オプションを使用している箇所を検出してください。

suppressTransitionError 削除

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

移行ガイド

コードに対し 移行ヘルパー を実行し suppressTransitionError: true オプションを使用している箇所を検出してください。

ルートフック

activate 置き換え

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

移行ガイド

コードに対し 移行ヘルパー を実行し beforeRouteEnter フックを使用している箇所を検出してください。

canActivate 置き換え

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

移行ガイド

コードに対し 移行ヘルパー を実行し canActivate フックを使用している箇所を検出してください。

deactivate 削除

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

移行ガイド

コードに対し 移行ヘルパー を実行し deactivate フックを使用している箇所を検出してください。

canDeactivate 削除

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

移行ガイド

コードに対し 移行ヘルパー を実行し canDeactivate フックを使用している箇所を検出してください。

canReuse: false 削除

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

移行ガイド

コードに対し 移行ヘルパー を実行し canReuse: false option.

data 置き換え

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

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

移行ガイド

コードに対し 移行ヘルパー を実行し data フックを使用している箇所を検出してください。

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

移行ガイド

コードに対し 移行ヘルパー を実行し $loadingRouteData メタプロパティが使用されている箇所を検出してください。