Static GitHub Issues

[2706] [router] IE9 does not work

prev: How to avoid index.vue in each folder and still have router generated ?
next: Nuxt.js Tryes to fetch source map in asyncData function.

When I go to http://localhost:3000/ and click <router-link to='/test'>to test</router-link>, it is work.

Problem and Steps to Reproduce However, when I go to http://localhost:3000/#/test or http://localhost:3000/test directly, an error message will be received.

Vue warn: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. nuxt Error while initializing app TypeError: Unable to get property 'toLowerCase' of undefined or null reference

I just installed @nuxtjs/router, babel and polyfill.

Part of my code router.js

import Vue from 'vue'
import Router from 'vue-router'
import Logo from '~/components/AppLogo.vue'
import Index from '~/pages/index.vue'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    fallback:true,
    routes: [
      {
        path: '/',
        component: Index,
        children:[{
          path: 'test',
          component: Logo
        }]
      }
    ]
  })
}

index.vue

<template>
  <div class="container">
    <div>
      <app-logo></app-logo>
      <h1 class="title">
        ie9test
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a>
        <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a>
      </div>
    </div>
    <div>
      <router-link to='/'>to root</router-link>
    </div>
    <div>
      <router-link to='/test'>to test</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

AppLogo.vue

<template>
  <div class="VueToNuxtLogo">
    <div class="Triangle Triangle--two"></div>
    <div class="Triangle Triangle--one"></div>
    <div class="Triangle Triangle--three"></div>
    <div class="Triangle Triangle--four"></div>
  </div>
</template>
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2351">#c2351</a>)</em></sub></div>