Routing doesn't work with IE 11 : URL change, back and forward buttons #1985

Krabi · 2018-01-12T10:16:48Z

Version

3.0.1

Reproduction link

http://cant-be-created

Steps to reproduce

Create project with : vue init webpack vuejs-webpack
Add some router components in src/router/index.js as:
...
import HelloWorld from '@/components/HelloWorld'
import HelloWorld2 from '@/components/HelloWorld2'
...
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/example2',
name: 'HelloWorld2',
component: HelloWorld2
}
Copy component in src/components/HelloWorld.vue into new src/components/HelloWorld2.vue

Change names and a content a bit.

Add devDependencies (Currenlty this is not clear for me) into package.json:
"babel-polyfill": "^6.26.0",
"es6-promise": "^4.2.2",
"babel-preset-es2015": "^6.24.1",
.babelrs change as:
...
"stage-2",
"es2015"
...
src/main.js as:
import Vue from 'vue'
import App from './App'
import router from './router'

import es6Promise from 'es6-promise'
es6Promise.polyfill()
...

build/webpack.base.conf as:
...
const babelPolyFill = require("babel-polyfill")
...
entry: ["babel-polyfill", "./src/main.js"],
...
npm install && npm run build && npm run dev
Open IE 11 and copy paste to URL bar http://localhost:8080/#/
Append into url: example2 and hit enter
NB!!! Nothing happens. Old page is visible. Should show second page content.
Click IE refresh: site is now visible
NB!!! Click back button: nothing happens. Second page is visible.
Click IE refresh: first page is now visible.
FF for example works fine with same solution.

What is expected?

Url hash (#) part shpould change compponents for hash.

What is actually happening?

Nothing happens on url change IN IE. FF for example works fine.

Krabi · 2018-01-12T11:15:21Z

Also same with simplest code:

<!DOCTYPE html>
<html>
    <head>
        <title>VueJS simplest</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=11; IE=edge;" />
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>
        <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
        <script>
            var root, foo, bar, routes, router, app;
            root = {template: '<div>root</div>'};
            foo = {template: '<div>foo</div>'};
            bar = {template: '<div>bar</div>'};
            routes = [
                {path: '/', component: root},
                {path: '/foo', component: foo},
                {path: '/bar', component: bar},
                {path: '*', redirect: '/'}
            ];
            router = new VueRouter({
                routes: routes
            });
            app = new Vue({router: router}).$mount('#app');
        </script>
    </body>
</html>

posva · 2018-01-12T14:04:32Z

Duplicate of #1849

posva marked this as a duplicate of #1849 Jan 12, 2018

posva closed this as completed Jan 12, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Routing doesn't work with IE 11 : URL change, back and forward buttons #1985

Routing doesn't work with IE 11 : URL change, back and forward buttons #1985

Krabi commented Jan 12, 2018

Krabi commented Jan 12, 2018 •

edited

Loading

posva commented Jan 12, 2018

Routing doesn't work with IE 11 : URL change, back and forward buttons #1985

Routing doesn't work with IE 11 : URL change, back and forward buttons #1985

Comments

Krabi commented Jan 12, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

Krabi commented Jan 12, 2018 • edited Loading

posva commented Jan 12, 2018

Krabi commented Jan 12, 2018 •

edited

Loading