Vue Routerでページを更新すると
zukan画面にいるときに、ページをリロードすると
画面
Console
みたいになる。
SPAは常にindex.html一枚で処理をしている。
にもかかわらず、URLが見かけ上のzukanのPATHにアクセスしようとするため、エラーになる。
環境
| version | |
|---|---|
| Node.js | v11.15.0 |
| OS | macOS Catalina v10.15.7 |
| プロセッサ | Intel Core i5 |
原因
historyを設定してURLから#を削除していると起こる。
ちなみにhistoryとは下で設定したやつ。
router.js
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
//...略
対処
#を削除しつつ、問題を解決する方法は公式サイトに解説されている。
Node.js(Express)の場合
自分が作ったものがこれだったのでもう少し詳しく。
公式にもあるように、connect-history-api-fallbackを使うと良い。
install
npm install connect-history-api-fallback
server.jsの例
app.use(history())を追加する位置に注意。
app.use(serveStatic(__dirname + "/docs"))よりも後に書くと動作しなくなった。
server.js
const express = require('express')
const serveStatic = require('serve-static')
const history = require('connect-history-api-fallback') // 追加
const port = process.env.PORT || 5000
app = express()
app.use(history()) // 追加
app.use(serveStatic(__dirname + "/docs"))
app.listen(port)
console.log('server started '+ port)