Vueプロジェクトの#を削除する方法

この記事では、vue プロジェクトの # を削除する方法とその ie9 互換性を主に紹介します。編集者がそれを共有し、参考にします。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. vueプロジェクトのアクセスアドレスを削除する方法 #

vue2のルーティング設定にモードを追加(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' を設定します。

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

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 と互換性を持つ必要があり、バックグラウンドでアクセス アドレスが厳密に検証される場合、このモードの使用はお勧めできません。内容に誤りや脱落がある場合は、批判して修正してください~

関連する推奨事項:

webpack と vue2 を使用した Vue プロジェクトのスケルトンの構築についての説明

共通コンポーネントとVue プロジェクトのフレームワーク構造

Vue プロジェクトの定義グローバル変数とグローバル関数メソッド

以上がVueプロジェクトの#を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。