What should I do if the Vue project reports an error when redirecting in IE routing?

If you are developing a project that uses the Vue.js framework and use Vue Router to manage routes, you may encounter a problem: under IE browser, route jump will report an error.

This problem is usually caused by the fact that Vue Router uses the History mode of HTML5, but the IE browser does not support this mode. But don’t worry, below we’ll show you how to fix this problem.

Solution

1. Introduce polyfill

HTML5 History mode requires the browser to support HTML5 API, and IE browser only supports earlier versions of HTML API , so we need to use polyfill to make it compatible.

You can use the following code to introduce polyfill:

<!-- 引入 polyfill -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

2. Configure routing mode

In order to solve the problem that IE browser does not support History mode, we need to modify it Routing mode of Vue Router. Change it from the default History mode to Hash mode.

In the configuration file of Vue Router, find the following code:

const router = new VueRouter({
  mode: 'history',
  routes
})

Change the value of mode from history to hash That’s it:

const router = new VueRouter({
  mode: 'hash',
  routes
})

3. Configure the server

If your project needs to interact with the server during deployment, you need to configure the server to support routing jumps . When using the History mode of Vue Router, when the user enters an address in the browser address bar, the server will default to the assumption that the user needs to access a file or directory under the address, and will send the request to the server file system for processing. But in practice, what we prefer is to send the request to Vue Router for processing so that the current page can be rendered correctly.

If you are using Node.js as the server, you can configure it through the following code:

const express = require('express')
const app = express()

app.use(express.static(__dirname + '/dist'))

// 对所有请求都返回 index.html 文件
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/dist/index.html')
})

const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`Server started at ${port}`)
})

The above code uses the express framework and sets up a static folder to store the static files of the website resource. For all requests, the index.html file will be returned to ensure that Vue Router is functioning properly and handling redirect requests.

Summary

The above is the method to solve the routing jump error of Vue project under IE browser. When encountering this problem, you can try to use polyfill for compatibility, modify the routing mode, or configure the server. Under the premise of ensuring that the modifications are correct, the project can run normally in the IE browser.

The above is the detailed content of What should I do if the Vue project reports an error when redirecting in IE routing?. For more information, please follow other related articles on the PHP Chinese website!