tbl0605/2774_example.html

## 2774_example.html
<!DOCTYPE html>
<html>
  <head>
    <title>Additional comment for Issue 2774</title>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js"></script>
  </head>
  <body>
    <h1>
      <a href="https://github.com/vuejs/vue-router/pull/2774"
        >Additional comment for Issue 2774</a
      >
    </h1>
    <h2>Instructions</h2>
    <ol>
      <li>Load file up using methods described below</li>
    </ol>
    <h2>Test case</h2>
    <ul>
      <li>
        Host file on a windows filesystem, e.g. 'file:///C:/2774_example.html',
        and open it using Edge, you'll see that the URL shown by Edge will
        <i>wrongly</i> be 'file:///C:/C:/2774_example.html'
      </li>
    </ul>
    <div id="app">Vue failed to load</div>
    <script type="text/javascript">
      const First = { template: '<div>First route content</div>' };
      const Second = { template: '<div>Second route content</div>' };

      const router = new VueRouter({
        routes: [
          { path: '/', name: 'root', redirect: { name: 'first' } },
          { path: '/first', name: 'first', component: First },
          { path: '/second', name: 'second', component: Second }
        ],
        base: '.',
        mode: 'hash',
        scrollBehavior(to, from, savedPosition) {
          if (to.hash && process.env.VUE_APP_ROUTE_MODE !== 'hash') {
            return { selector: to.hash };
          }
          if (savedPosition) {
            return savedPosition;
          }
        }
      });

      Vue.use(VueRouter);

      new Vue({
        template: `
        <div>
          <router-link to="/first">First route works correctly</router-link>
          <router-link to="/second">Second route works correctly</router-link>
          <a href @click.prevent="reload()">Reloading this page under Edge will <b>NOT</b> work</a>
          <router-view></router-view>
        </div>`,
        methods: {
          reload: function() {
            window.location.reload(true);
          }
        },
        router: router
      }).$mount('#app');
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Additional comment for Issue 2774</title>
	<meta charset="utf-8" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js"></script>
	</head>
	<body>
	<h1>
	<a href="https://github.com/vuejs/vue-router/pull/2774"
	>Additional comment for Issue 2774</a
	>
	</h1>
	<h2>Instructions</h2>
	<ol>
	<li>Load file up using methods described below</li>
	</ol>
	<h2>Test case</h2>
	<ul>
	<li>
	Host file on a windows filesystem, e.g. 'file:///C:/2774_example.html',
	and open it using Edge, you'll see that the URL shown by Edge will
	<i>wrongly</i> be 'file:///C:/C:/2774_example.html'
	</li>
	</ul>
	<div id="app">Vue failed to load</div>
	<script type="text/javascript">
	const First = { template: '<div>First route content</div>' };
	const Second = { template: '<div>Second route content</div>' };

	const router = new VueRouter({
	routes: [
	{ path: '/', name: 'root', redirect: { name: 'first' } },
	{ path: '/first', name: 'first', component: First },
	{ path: '/second', name: 'second', component: Second }
	],
	base: '.',
	mode: 'hash',
	scrollBehavior(to, from, savedPosition) {
	if (to.hash && process.env.VUE_APP_ROUTE_MODE !== 'hash') {
	return { selector: to.hash };
	}
	if (savedPosition) {
	return savedPosition;
	}
	}
	});

	Vue.use(VueRouter);

	new Vue({
	template: `
	<div>
	<router-link to="/first">First route works correctly</router-link>
	<router-link to="/second">Second route works correctly</router-link>
	<a href @click.prevent="reload()">Reloading this page under Edge will <b>NOT</b> work</a>
	<router-view></router-view>
	</div>`,
	methods: {
	reload: function() {
	window.location.reload(true);
	}
	},
	router: router
	}).$mount('#app');
	</script>
	</body>
	</html>