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
constrouter=newRouter({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
constexpress=require('express')constserveStatic=require('serve-static')consthistory=require('connect-history-api-fallback')// 追加constport=process.env.PORT||5000app=express()app.use(history())// 追加app.use(serveStatic(__dirname+"/docs"))app.listen(port)console.log('server started '+port)