記事ディレクトリ
序文
vue ルーティングの 3 つのモードHash模式、、History模式abstract 模式
1. ハッシュモード
- ビュー 3:
- ハッシュ パターンは
createWebHashHistory()以下を使用して作成されます。
import {
createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})
- ビュー2
import Router from 'vue-router'
const router = new Router({
node: 'hash',
routes: [
//...
]
})
内部的に渡される実際の URL の前にハッシュ文字 (#) が使用されます。URL のこの部分はサーバーに送信されることはないため、サーバー レベルでの特別な処理は必要ありません。ただし、SEOには悪影響を及ぼします。これが心配な場合は、HTML5 モードを使用できます。
2. HTML5（履歴）モード
- ビュー 3
- History スキーマは
createWebHashHistory()以下を使用して作成されます。
import {
createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
],
})
- ビュー2
import Router from 'vue-router'
const router = new Router({
node: 'history',
routes: [
//...
]
})
この履歴モードを使用すると、URL も「通常」に見えます。https://example.com/user/id
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
しかし、ここで問題が発生します。私たちのアプリケーションはシングルページのクライアント アプリケーションであるため、適切なサーバー構成がなく、ユーザーがブラウザで直接アクセスするとhttps://example.com/user/id、次の図に示す 404 エラーが発生します。これは恥ずかしいです。
ヒント: 私が参加したプロジェクトの共通デプロイメント アクセスは基本的に Nginx ですが、場合によってはインターネット インフォメーション サービス (IIS) が使用されます。
- 解決策は次のとおりです。
1.nginxの設定
nginx.conf ファイルを次のように変更します。
location / {
try_files $uri $uri/ /index.html;
}
また
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last; # /index.html 为项目根目录
}
2、Internet Information Services (IIS)配置
a. IIS URLRewriteをインストールする
b. Web サイトのルート ディレクトリに、次の内容を含む web.config ファイルを作成します。
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
3. 抽象モード
abstract は vue routing の 3 つ目のモードで、ブラウザ API をサポートしていない環境で使用されますが、まだ実際には使用されておらず、関連する実装は後ほど補足します。
- ビュー 3
- SSR で使用する場合は、対応する履歴を手動で渡す必要があります。
- 抽象スキーマは
createMemoryHistory()以下を使用して作成されます。
// router.js
let history = isServer ? createMemoryHistory() : createWebHistory()
let router = createRouter({
routes, history })
// 在你的 server-entry.js 中的某个地方
router.push(req.url) // 请求 url
router.isReady().then(() => {
// 处理请求
})
要約する
上記は Vue のさまざまな履歴モードの内容ですが、この記事では Vue 履歴ルーティング モードの使用方法を簡単に紹介し、具体的なプロジェクト構成はプロジェクトの実際の状況に応じて構成する必要があります。
読んでくれてありがとう！
参考: Vue ルーティングのさまざまな履歴モード