Vue-router remove＃

Vue Router Remove

履歴モード

Vue-routerのデフォルトのハッシュモード-URLのハッシュを使用して完全なURLをシミュレートするため、URLが変更されてもページは再読み込みされません。

醜いハッシュが必要ない場合は、ルートの履歴モードを使用できます。このモードでは、history.pushState APIを最大限に活用して、ページをリロードせずにURLジャンプを完了します。

const router = new VueRouter({ mode: 'history', routes: [...] })

履歴モードを使用する場合、URLは通常のURLのようになります。 Http://yoursite.com/user/id、それもよさそうだ！

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

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

# backend configuration example # Apache RewriteEngine On RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]

mod_rewriteに加えて、FallbackResourceを使用することもできます。

# nginx location / { try_files $uri $uri/ /index.html } # Node.js const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open 'index.htm' file.') } res.writeHead(200, { 'Content-Type': 'text/html charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) })