The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode

Huawei cloud developer community 2021-09-15 04:12:54
new front-end end lady problem


​​​​ 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: [...]
})
  • 1.
  • 2.
  • 3.
  • 4.

When you use history Mode time ,URL Just like normal url, for example http://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 http://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 .

# Backend configuration example

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/).

#Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

except mod_rewrite, You can also use FallbackResource (opens new window).

#nginx

location / {
try_files $uri $uri/ /index.html;
}
  • 1.
  • 2.
  • 3.

# Native Node.js

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)
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

# be based on Node.js Of Express

about Node.js/Express, Please consider using   connect-history-api-fallback middleware  (opens new window).

#Internet InformationServices (IIS)

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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

#Caddy

rewrite {
regexp .*
to {path} /
}
  • 1.
  • 2.
  • 3.
  • 4.

#Firebase host

In your firebase.json Add :

{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

# Warning

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 }
]
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

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 ~

版权声明
本文为[Huawei cloud developer community]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210909110900564u.html

  1. Monthly salary 10K yard farmer, job hopping to 40K architect, summary of technical learning Roadmap
  2. Manually compile and deploy LNMP environment (centos7.5 + nginx-1.18.0 + mysql-5.7.30 + php-7.4.14)
  3. The drama "light" of the Republic of China premiered, with a dismal audience rating of less than 0.4, creating the worst audience rating of Hunan Satellite TV!
  4. It is said that Ericsson will cancel Nanjing R & D center
  5. Question d'entrevue commune de Spring Cloud, où est l'avenir de 2021 Java?
  6. Sharedpreferences Replacement - mmkv Integration and Principles, 27 years old Preschool Development
  7. Différence entre TCP et UDP, développement frontal mobile
  8. The whole process of mybatis dynamic proxy implementation of spring series? The correct answer rate is less than 1%
  9. Ajax Foundation
  10. Développement Android comprendre ces entrevues naturelles sans peur, Android Knowledge System
  11. L'expérience de l'entrevue d'embauche de l'école Java peut vous aider à obtenir une entrevue.
  12. Leetcode pinceau question 989 - simple - addition d'entiers sous forme de tableau
  13. Children of the Qiao family: after reading Qiao Zuwang's last selflessness, we can recognize his simple father's love
  14. Partager une petite expérience d'entrevue et obtenir un produit
  15. Solution de capture de paquets https sur la plate - forme Android et analyse des problèmes, Android développe un apprentissage complet
  16. Young people are the first choice for transportation. These hatchbacks suck countless powder. Is it your dish?
  17. "Net red granny" over 70 has countless circle powder by wearing, and is more fashionable than young people
  18. Méthodes de fonctionnement des tableaux couramment utilisées en javascript
  19. Summary of Vue knowledge points
  20. 10 septembre: deuxième visite d'une journée à Yantai, Shandong - vue nocturne de Chaoyang Street, Zhifu District
  21. Front and back end data interaction (V) -- what is Axios?
  22. Windows configures nginx to boot automatically
  23. Des questions d'entrevue communes à Tomcat pour discuter de votre compréhension de la technologie de verrouillage distribué,
  24. JS handscrap, Classic interview question, web front end Development Process
  25. Android 400 questions d'entrevue pour vous aider à entrer dans l'usine, un tour pour vous apprendre à comprendre netty
  26. Développement et projet d'application Web statique côté PC
  27. Recommandé pour le tutoriel Spring Framework, 2021 dernière question d'entrevue d'embauche de la société aiqiyi Java,
  28. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  29. [partage d'expérience de travail], 2021 les dernières questions d'entrevue Java de Baidu, Headlines, etc.
  30. Lisez l'analyse de 497 questions pour l'entrevue d'ingénieur principal Android et vérifiez les lacunes.
  31. Grâce à cette collection de questions d'entrevue d'automne, le salaire de saut d'emploi et l'entrevue de développement audio et vidéo ont doublé.
  32. Prenez d'un coup l'offre de Tencent meituan et jetez un coup d'oeil à cette copie de l'entrevue de printemps!
  33. L'expérience et l'expérience d'un Maverick Java en matière d'entrevue sur les MTD, l'expérience de l'entrevue d'embauche du printemps Java en 2021,
  34. Vue中自定义列表复选框和全选框-案例
  35. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  36. CSS text overflow ellipsis summary, as you wish
  37. C'est la mode la plus étrange que j'ai jamais vue.
  38. Cases à cocher et toutes les cases à cocher de la liste personnalisée en vue - CAS
  39. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  40. Vue3.0 using Gaode map to obtain longitude and latitude information
  41. Front end interview daily 3 + 1 - day 877
  42. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  43. React realizes the function of copying pictures with one click
  44. White space, word break and word wrap are the three most basic and confusing attributes in CSS - thoroughly understand
  45. Trois ans d'expérience d'entrevue avec une femme de programmation diplômée, une réflexion sur la cohérence de l'expiration des données de redis Master slave Node,
  46. Résumé de l'entrevue Android de Dachang, carte technique Android
  47. Un plan de carrière Java correct, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  48. Le résumé de l'entrevue Android de Dachang est en retard
  49. Un article vous a appris à gérer les entrevues sur le Web, à partager 350 vraies questions d'entrevue Java,
  50. Jquery Tools Methodology collation, Sharing a little interview Experience
  51. Jquery plug - in urianchor, app front end Development
  52. $in jquery, Visualized Web Development Tool
  53. Le développement Java doit être fait. Les entrevues https demandent souvent une analyse complète.
  54. vue v-if未生效问题
  55. vue动态改变组件外部元素样式
  56. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  57. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  58. Who doesn't want to make a scratch music by himself? Scratch music is realized by native JS
  59. Learn XPath to help climb the data of major e-commerce platforms in the Mid Autumn Festival
  60. vue動態改變組件外部元素樣式