VUE における ie9 互換性の詳細な解釈

この記事では、vue プロジェクトの # を削除する方法と ie9 の互換性を主に紹介しますので、参考にしてください。

1. vue2 のルーティング設定の #

Add モードを削除する方法 (vue-cli で作成されたプロジェクトは src/router/index.js にあります)

export default new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   name: 'menu',
   component: menu,
   children: [
    {
     path: 'organization',
     component: organization,
     children: [
      {
       path: '',
       redirect: 'organizationSub'
      },
      {
       path: 'organizationSub',
       component: organizationSub
      }
     ]
    },
    {
     path: 'user',
     component: user
    },
    {
     path: 'role',
     component: role
    }
   ]
  }
 ]
})

2. Vue のルーティング原理

2.1 ハッシュ モード: vue-router のデフォルトのルーティング モード。

vue で開発されたシングルページ アプリケーションには HTML が 1 つだけあり、切り替え時の URL の変更は、URL のハッシュ モードを通じて完全な URL をシミュレートします。

2.2 履歴モード: vue2 のモード: 'history' を設定します。

URLジャンプを完了するにはhistory.pushState APIを使用します

HTML5ヒストリーモード公式Webサイトの紹介: https://router.vuejs.org/zh-cn/essentials/history-mode.html

3.

ただし、このモードでうまくプレイするには、バックグラウンド構成のサポートが必要です。私たちのアプリケーションはシングルページのクライアントアプリケーションであるため、バックグラウンドが正しく設定されていない場合、ユーザーがブラウザで http://oursite.com/user/id に直接アクセスすると、404 が返され、見た目が良くありません。 。

したがって、すべての状況をカバーする候補リソースをサーバー側に追加する必要があります。URL が静的リソースに一致しない場合は、アプリが依存するページである同じindex.html ページを返す必要があります。

vue-router は公式 Web サイトで紹介されており、バックグラウンド設定サンプルもあります: https://router.vuejs.org/zh-cn/essentials/history-mode.html

4.テスト後、モード: 'history' は IE9 では有効になりません。Vue プロジェクトが IE9 と互換性を持つ必要があり、バックグラウンドでアクセス アドレスが厳密に検証される場合、このモードの使用はお勧めできません。内容に誤りや脱落がある場合は、批判して修正してください〜上記は私があなたのためにまとめたものです。

関連記事:

WeChat アプレットで Promise を使用してコールバックを実装するには?

JS でのコマンド モードの概念と使用法 (詳細なチュートリアル)

Selenium を使用して Taobao データ情報をキャプチャする

以上がVUE における ie9 互換性の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。