Vue.jsのHashモードを使用しています。
アクセス時のURLが#補完後、myapp.com?foo=bar#/でうまくいっているのですが、
質問サイトで
「 myapp.com/#/?foo=barとにしたいのに、myapp.com?foo=bar#/ 」と#が予期せぬ位置に補完されてしまう。という質問を見ました。
①myapp.com?foo=bar#/だと何か悪影響があるのでしょうか？
②myapp.com/#/?foo=barとmyapp.com?foo=bar#/の差は何でしょうか。
②myapp.com/#/?foo=barとmyapp.com?foo=bar#/の差は何でしょうか。
URL としては別物です。 前者はフラグメントが #/?foo=bar になり、後者はクエリ文字列が ?foo=bar でフラグメントが #/ になります。詳しくは URL クラスでパースした結果を貼っておきます。最後の3行ずつに違いがあります。
% node
Welcome to Node.js v16.17.0.
Type ".help" for more information.
> new URL('https://myapp.com/#/?foo=bar')
URL {
href: 'https://myapp.com/#/?foo=bar',
origin: 'https://myapp.com',
protocol: 'https:',
username: '',
password: '',
host: 'myapp.com',
hostname: 'myapp.com',
port: '',
pathname: '/',
search: '',
searchParams: URLSearchParams {},
hash: '#/?foo=bar'
}
> new URL('https://myapp.com?foo=bar#/')
URL {
href: 'https://myapp.com/?foo=bar#/',
origin: 'https://myapp.com',
protocol: 'https:',
username: '',
password: '',
host: 'myapp.com',
hostname: 'myapp.com',
port: '',
pathname: '/',
search: '?foo=bar',
searchParams: URLSearchParams { 'foo' => 'bar' },
hash: '#/'
}
①myapp.com?foo=bar#/だと何か悪影響があるのでしょうか？
これについては Vue に詳しくないので分かりません。 Hash モードは実際のパスを変えずにフラグメントで仮想的なパスを表現する意味合いのはずなので、 #/?foo=bar のほうが正しそうな気はします。 ?foo=bar#/ だと Vue が foo=bar の存在を認識しなかったり、ブラウザのヒストリ管理がうまくいかなかったりするかもしれません。