Home

Issue: 2706

[router] IE9 does not work

[issue link]

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>

This question is available on Nuxt.js community (#c2351)