uniappでルーティングハッシュモードを変更する方法

モバイル インターネットと Web テクノロジの継続的な発展に伴い、ますます多くの企業や開発者が、マルチターミナル アプリケーションを迅速に開発するためにクロスプラットフォーム開発フレームワークを採用し始めています。 UniApp は、最も人気のあるクロスプラットフォーム開発フレームワークの 1 つとして、広く使用され、認知されています。実際の開発プロセスでは、UniApp で使用されるデフォルトのルーティング モードはハッシュ モードですが、SEO 最適化の必要性がある場合など、ルーティング モードを変更する必要がある場合があります。この記事では、UniApp でルーティング ハッシュ モードを変更する方法を紹介します。

1. UniApp ルーティング モードの概要

UniApp ルーティング モードを紹介する前に、まずルーティングとは何かを理解しましょう。ルーティングは基本的に、管理ページとコンポーネントを切り替えるためのメカニズムです。 UniApp では、デフォルトのルーティング モードはハッシュ モードです。いわゆるハッシュ パターンは、http://www.example.com/#/signin のように、URL の末尾に # で始まる文字列を結合します。この文字列を変更することで、別のページに切り替えることができます。

UniApp でのルーティングの基本的な使用法は次のとおりです:

<template>  
  <div>  
    <router-view></router-view>  
  </div>  
</template>  

<script>  
export default {  
  name: 'app',  
  components: {  
    HelloWorld  
  }  
}  
</script>

これは単純なルーティング構成の例です。表示するには、テンプレートで router-view タグを使用する必要があることがわかります。ルーティングコンポーネント。

2. ルーティング ハッシュ モードの変更

実際の開発では、ルーティング モードの変更が必要になる場合があります。たとえば、SEO の最適化を促進するには、ルーティング モードをハッシュ モードからヒストリー モードに変更する必要があります。次にルーティングモードを変更する方法を紹介します。

1. unpackage/dist/dev/mp-weixin/router/index.js ファイルを変更します

このファイルはパッケージ化された WeChat アプレット ルーティング構成ファイルです。最初に必要なものがあります。ファイルを入力して変更を加えます。ファイルの先頭に次のコードを追加します。

import VueRouter from 'vue-router'  
Vue.use(VueRouter)  

// 修改路由模式为history模式  
const router = new VueRouter({  
  mode: 'history'  
})

このようにして、ルーティング モードを履歴モードに変更します。

2. unpackage/dist/dev/web/router/index.js ファイルを変更します

このファイルは、Web 側でパッケージ化されたルーティング構成ファイルです。ファイルが変更されます。ファイルの先頭に次のコードを追加します。

import VueRouter from 'vue-router'  
Vue.use(VueRouter)  

// 修改路由模式为history模式  
const router = new VueRouter({  
  mode: 'history'  
})

同様に、ルーティング モードを履歴モードに変更します。

3. App.vue ファイルを変更する

最後のステップでは、App.vue ファイルを変更する必要があります。このファイルでは、次のコードを使用してルートを Vue にマウントし、router.beforeEach を使用してルートの変更を監視し、ページのレンダリングと切り替えを実装できます。

<template>  
  <div>  
    <router-view></router-view>  
  </div>  
</template>  

<script>  
import router from './router/index'  

export default {  
  router,  
  name: 'app',  
  components: {  
    HelloWorld  
  }  
}  
</script>

この時点で、ルーティング モードの変更は完了です。アプリケーションを再パッケージし、サーバーにデプロイして、ルーティング モードが正常に変更されたかどうかを確認します。

3. まとめ

上記は、この記事で紹介したUniAppのルーティングハッシュモード変更方法です。ルーティングはすべてのアプリケーションにとって不可欠な部分であり、適切なルーティング モードを選択すると、アプリケーションのユーザー エクスペリエンスと SEO 最適化効果が向上します。この記事が UniApp ルーティング開発に少しでも役立つことを願っています。

以上がuniappでルーティングハッシュモードを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。