Shulou(Shulou.com)06/01 Report--

This article mainly introduces the Vue project IE11 address bar directly change the routing page does not jump bug how to solve the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this Vue project IE11 address bar directly change the routing page does not jump bug how to solve the article will have a harvest, let's take a look at it.

Bug description:

For projects built with vue-cli, vue-router controls routing.

Compatible with Google Firefox IE11 and IEedge.

Change the routing address directly in the address bar of Google Firefox IEedge. Enter, the routing page can be refreshed to the responsive routing interface.

But in IE11, the address bar has changed, but the page has not changed.

Take a chestnut.

The project consists of a home page, route 1 and route 2 a single route. You can jump arbitrarily between three routes. The picture is as follows.

Normal browser: do not click the button, but directly change the route in the address bar, the interface can be switched normally.

IE11 browser: bug appears in abnormal IE browsers. No matter how you change the route in the address bar, the interface will not change.

Solution:

In app.vue, first determine that it is an IE browser. If it is, bind window to an event where the hash value changes. When the hash value changes, the route of the current interface will be obtained through $router.path and compared with the changed hash value in the address bar. If it is different, the push method of vue-router will be called to change the route artificially. The above code:

Mounted () {

If (!! window.ActiveXObject | | 'ActiveXObject' in window) {

Window.addEventListener ('hashchange', ()) = > {

Let currentPath = _ window.location.hash.slice (1)

If (this.$route.path! = = currentPath) {

This.$router.push (currentPath); / / actively change the routing interface

}

}, false)

}

}

On the "Vue project IE11 address bar directly change the route page does not jump bug how to solve" this article is introduced here, thank you for reading! I believe that everyone has a certain understanding of "Vue project IE11 address bar directly change the routing page does not jump bug how to solve" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.