foreword

Three modes of vue routing Hash模式, History模式,abstract 模式

1. Hash mode

View 3:
Hash patterns are createWebHashHistory()created with:

import {
    
     createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

View 2

import Router from 'vue-router'
const router = new Router({
    
    
	node: 'hash',
	routes: [
		//...
	]
})

It uses a hash character (#) before the actual URL passed internally. Since this part of the URL is never sent to the server, it doesn't require any special handling at the server level. However, it does have a bad effect in SEO. If you're worried about this, you can use HTML5 mode.

2. HTML5 (History) mode

View 3
The History schema is createWebHashHistory()created with:

import {
    
     createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    
    
  history: createWebHistory(),
  routes: [
    //...
  ],
})

View 2

import Router from 'vue-router'
const router = new Router({
    
    
	node: 'history',
	routes: [
		//...
	]
})

URLs will also look "normal" when using this history mode, e.g.https://example.com/user/id

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

However, here comes the problem. Since our application is a single-page client application, if there is no proper server configuration and the user directly accesses it in the browser https://example.com/user/id, he will get the 404 error shown in the figure below. This is embarrassing. 404 Not Found

Tips: The common deployment access of the project I participated in is basically Nginx, and occasionally Internet Information Services (IIS) is used

The solution is as follows:

1. nginx configuration

Modify the nginx.conf file as follows:

location / {
  try_files $uri $uri/ /index.html;
}

location / {
     try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
     index index.html index.htm;
 }
 #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
 #因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
    rewrite ^.*$ /index.html last; # /index.html 为项目根目录
}

2, Internet Information Services (IIS) deployment

a. Install IIS UrlRewrite

b. Create a web.config file in the root directory of the website with the following content:

<?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>

3. Abstract mode

abstract is the third mode in vue routing. It is used in an environment that does not support browser API. It has not been actually used yet, and related implementation will be supplemented later.

View 3
When used on SSR, you need to manually pass the corresponding history:
Abstract schemas are createMemoryHistory()created with:

// router.js
let history = isServer ? createMemoryHistory() : createWebHistory()
let router = createRouter({
    
     routes, history })
// 在你的 server-entry.js 中的某个地方
router.push(req.url) // 请求 url
router.isReady().then(() => {
    
    
  // 处理请求
})

Summarize

The above is the content of different history modes of Vue. This article briefly introduces the use of Vue History routing mode, and the specific project configuration needs to be configured according to the actual situation of the project.

Thanks for reading!
Reference: Different History Modes for Vue Routing

Vue routing mode (history mode refresh page blank solution)

Article Directory