Vue Router 0.7.x からの移行

Vue Router 2 のみが Vue 2 と互換性があるため、Vue を更新する場合は、Vue Router も更新する必要があります。このため、メインのドキュメントに移行パスの詳細を追加しました。
Vue Router 2 の使用に関する完全なチュートリアルについては、Vue Router のドキュメント を参照してください。

ディレクトリ

##ルーターの初期化
##ルート定義
#router.map
- ##router.on
- router.beforeEach
- #subRoutes
- ##router.redirect
- router.alias
- ##任意のルート属性
- ##ルートマッチ
v-link-active
- ##ハッシュバン: false
history: true
- ##abstract: true
- ##ルーティングオプション: その他
- ##saveScrollPosition
#ルーティングフック
- ##アクティブ化
- canReuse: false
- ##データ
- $loadingRouteData

#ルーターの初期化

##router.start

replacement Vue Router を含むアプリを初期化するための特別な API はなくなります。つまり、

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

^{Vue にルート属性を渡すだけで済みます。インスタンス:}
new Vue({ el: '#app', router: router, template: '<router-view></router-view>' })
または、ランタイムのみのメソッドを使用している場合:

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

アップグレードメソッド

実行

Migration Assistant

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

アップグレード方法実行

Migration Assistant

router.on が呼び出される例を見つけます。

router.beforeEach

変更router.beforeEach は非同期で動作し、

#next

関数を 3 番目の引数として受け取ります。

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

#サブルート

#名前の変更^{Vue Router と他のルーティングライブラリ間の一貫性を保つために、名前を}children

に変更しました。 ##アップグレード方法

実行

移行アシスタント subRoutes オプションの例を見つけてください。

router.redirect

replace今度は、代わりに ルート定義オプションを使用してください。たとえば、次の

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

^を以下のroutes 設定で定義されているように更新します:

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

アップグレードメソッド

Migration Assistant

を実行します。

router.redirect が呼び出される例を見つけます。

router.alias##置換これは、エイリアス操作の

ルーティング定義のオプション

になりました。たとえば、routes 定義で次のように構成する必要があります:

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

複数のエイリアス操作を実行する必要がある場合は、配列を使用することもできます。実装する構文:

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

アップグレードメソッド

実行移行アシスタント検索

ルーターの例.alias

が呼び出されます。

任意のルート属性

置換

任意のルート属性は、将来の新機能との競合を避けるために、新しいメタ属性の範囲内にある必要があります。たとえば、以前に次のように定義した場合:

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

次のように更新する必要があります:

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

ルート上のプロパティにアクセスする場合でも、meta を渡します。例:

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

アップグレード方法

実行移行アシスタントメタにないルートを検索します。ドメイン下の関数の例。

URL のクエリ array[] 構文^削除

配列をクエリに渡す場合このパラメータでは、URL 構文は /foo?users[]=Tom&users[]=Jerry ではなくなり、代わりに新しい構文は /foo?users=Tom&users=Jerry になります。 time $route.query.users は配列のままですが、クエリにパラメーターが 1 つしかない場合: /foo?users=Tom、ルートに直接アクセスするときは、 vue-router は、予想されるユーザーが配列であることを認識しません。したがって、計算プロパティを追加し、$route.query.users が使用されているすべての場所でそれを置き換えることを検討してください。

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

ルートマッチング

ルートマッチングでは path-to-regexp パッケージが使用されるようになり、以前よりも柔軟に作業が容易になります。

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

構文は若干変更されているため、たとえば

/category/*tags は /category/:tags に更新する必要があります。

アップグレード方法

実行

移行アシスタント非推奨のルーティング構文の例を見つけてください。＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃リンク＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

##v-link

置換

# #v-link
ディレクティブは新しい

<router-link>コンポーネントディレクティブに置き換えられ、作業のこの部分は Vue のコンポーネントによって完了されました。 2.これは、いずれの場合も、次のようなリンクがある場合:

export default {
  // ...
  computed: {
    // 此计算属性将始终是个数组
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}

に更新する必要があることを意味します: <a v-link="'/about'">About</a> 注: <router-link>サポートされていません^{target="_blank"}属性。新しいタブを開く場合は、<a> タグを使用する必要があります。

アップグレード方法移行アシスタントを実行します

v-link

コマンドを見つけます例。

v-link-active##replace

v-link-active

また、タグ属性が <router-link> コンポーネント で指定されているため、非推奨になりました。たとえば、

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

を次のように更新する必要があります。

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

<a>

タグは実際のリンクになります (正しいリンクが取得できます)。 )、ただし、アクティブ化されたクラスは外部の <li> タグに適用されます。

アップグレード方法実行

移行アシスタント

v-link-active を検索します。ディレクティブの例

##router.go##変更 HTML5 History API
との一貫性を保つために、

router.go

が戻る/進むナビゲーション、router.push## として使用されています。 # は特別なページを指示するために使用されます。アップグレード方法

Migration Assistant を実行し、router.go

を見つけて、

router.push 呼び出される命令の例。

`#ルーティング: モード`

##hashbang: false 削除 Hashbang は Google のニーズに応えなくなりましたURL をクロールする場合、それらはハッシュ戦略のデフォルトのオプションではなくなります。

アップグレード方法

移行アシスタントを実行します hashbang: false オプションを見つけます例。

履歴: true 交換すべてのルーティングモデルオプションは、単一の

mode オプション  に減らされます。 
<router-link tag="li" to="/about">
  <a>About</a>
</router-link>
 をこの記述に更新する必要があります: var router = new VueRouter({
  history: 'true'
})
アップグレード方法実行 移行ヘルパー
 history: true オプションの例を見つけてください。 

#要約: true replacementすべてのルーティング モデル オプションは、単一の mode
 オプション  に減らされます。 
var router = new VueRouter({
  mode: 'history'
})
 をこの記述に更新する必要があります: var router = new VueRouter({
  abstract: 'true'
})
アップグレード方法実行 移行ヘルパー 
abstract: true オプションの例を見つけてください。 

# ルーティング オプション: その他

 ##saveScrollPosition replacement
受け入れられるように置き換えられました A関数の 
scrollBehavior オプション  を使用すると、ルートごとにスクロール動作を完全にカスタマイズできます。これにより、多くの新しい可能性が開かれますが、単に古い動作をコピーする場合は、
var router = new VueRouter({
  mode: 'abstract'
})
 に置き換えることができます: 
saveScrollPosition: true
アップグレード メソッド 
Migration Assistant を実行します saveScrollPosition: true オプションの例を見つけてください。 

#root 名前を変更しますHTML の 
<base> タグとの一貫性を維持するために、名前を base に変更しました。 
アップグレード方法実行 移行アシスタント 
root の例を見つけます。オプション。 
transitionOnLoad
 削除Vue のトランジション システム appeared トランジション コントロール  が存在するため、このオプションは不要になります。 
アップグレード方法
移行アシスタントを実行します transitionOnLoad: true オプションを見つけます例。 

suppressTransitionError 削除 #フックを簡素化するために削除されました。本当に遷移エラーを抑制する必要がある場合は、代わりに 
try…catch を使用できます。 
アップグレード方法
移行アシスタントを実行します suppressTransitionError: true オプションを見つけます例。 

#ルーティングフック
 
アクティブ化 置換 使用 
beforeRouteEnter このコンポーネントは置き換えられます。 
アップグレード方法実行 移行アシスタント
 activate の例を見つけます。針。 

canActivate 置換  ルーティングで beforeEnter
 を代わりに使用します。 
アップグレード方法実行 移行アシスタント 
canActivate の例を見つけます。針。 

非アクティブ化##削除 
beforeDestroy または destroyed フックを代わりに使用してください。 
アップグレード方法実行 移行アシスタント
 deactivate フックの例を見つける。 

非アクティブ化できます 交換 代わりにコンポーネントで beforeRouteLeave
 を使用してください。 
アップグレード方法実行 移行アシスタント 
canDeactivate の例を見つけます。針。 

#canReuse: false
 remove ^{は、新しい Vue ルーティングでは使用されなくなります。}
アップグレード方法
移行アシスタントを実行します canReuse: false
 オプションを見つけます例。 

データ
 置換 $routeプロパティはリアクティブなので、次のようにウォッチャーを使用してルートの変更に応答するだけです: 
scrollBehavior: function (to, from, savedPosition) {
  return savedPosition || { x: 0, y: 0 }
}
 アップグレード方法
実行 移行アシスタント data
 フックの例を見つけます。 

$loadingRouteData 削除#独自のプロパティ (例: 
isLoading) を定義し、ルート上のウォッチャーの読み込みステータスを更新します。たとえば、axios を使用してデータを取得する場合: 
watch: {
  '$route': 'fetchData'
},
methods: {
  fetchData: function () {
    // ...
  }
}
← Vue 1.x からの移行
Vuex 0.6.x から 1.0 への移行 →

提出する

ホームページ動画に質問私の

`PHP中国語ウェブサイト`

ホームページコース記事に質問辞書マニュアルダウンロード検索 APPダウンロード

Vue Router 0.7.x からの移行

router.map

ルートマッチング

置換

プログラミングナビゲーション

`#ルーティング: モード`

# ルーティングオプション: その他

`PHP中国語ウェブサイト`

Vue Router 0.7.x からの移行

router.map

ルート マッチング

置換

プログラミング ナビゲーション

#ルーティング: モード

# ルーティング オプション: その他

PHP中国語ウェブサイト

ルートマッチング

プログラミングナビゲーション

`#ルーティング: モード`

# ルーティングオプション: その他

`PHP中国語ウェブサイト`