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>