Abstract ：vue-router Default hash Pattern —— Use URL Of hash To simulate a complete one URL, So when URL When the change , The page will not be reloaded .
This article is shared from Huawei cloud community 《 Study VueRouter,HTML5 History Pattern , because history The mode refresh page appears 404》, author ： DevFeng .
vue-router Default hash Pattern —— Use URL Of hash To simulate a complete one URL, So when URL When the change , The page will not be reloaded .
If you don't want something ugly hash, We can use routing history Pattern , This model takes full advantage history.pushState API To complete URL Jump without reloading the page .
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Copy code When you use history Mode time ,URL Just like normal url, for example yoursite.com/user/id, Good looking, too …
But play it well , Background configuration support is also required . Because our application is a single page client application , If the background is not configured correctly , When the user is directly accessed in the browser oursite.com/user/id It will return 404, It's not good .
So , You want to add a candidate resource to the server that covers all cases ： If URL No static resources were matched , The same should be returned index.html page , This page is you app Dependent pages .
Be careful ： The following example assumes that you are serving the application in the root directory . If you want to deploy to a subdirectory , You need to use VueCLI Of
publicPath Options (opens new window) And the related router base property (opens new window). You also need to adjust the root directory in the following example to a subdirectory ( For example RewriteBase /name-of-your-subfolder/ Replace RewriteBase/).
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Copy code except mod_rewrite, You can also use FallbackResource (opens new window).
location / {
try_files $uri $uri/ /index.html;
}
Copy code const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.html', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.html" 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)
})
Copy code about Node.js/Express, Please consider using connect-history-api-fallback middleware (opens new window).
1. install IIS UrlRewrite(opens new window)
2. Create a... In the root of your site web.config file , The contents are as follows ：
<?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>
Copy code rewrite {
regexp .*
to {path} /
}
Copy code In your firebase.json Add ：
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Copy code Give me a warning , Because after that , Your server will not return 404 Error page , Because it returns for all paths
index.html file . To avoid that , You should be Vue The application covers all routing conditions , Then give another example 404 page .
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
Copy code perhaps , If you use Node.js The server , You can use the server route to match the incoming URL, Does not return... When there is no match to the route 404, To achieve a fallback .
Click to follow , The first time to learn about Huawei's new cloud technology ~