diff --git a/demo/deploymentIndex.js b/demo/deploymentIndex.js
index 3d9a3cc16..8d8de7e61 100644
--- a/demo/deploymentIndex.js
+++ b/demo/deploymentIndex.js
@@ -1,5 +1,4 @@
-import { Vue, router } from './deploymentInit'
-import i18n from './i18n'
+import { Vue, router, i18n } from './init'
 import hljs from './hljs'
 import demoRouterView from './demoRouterView'
 import NaiveUI from '../lib/index'
@@ -10,6 +9,6 @@ NaiveUI.setHljs(hljs)
 
 new Vue({
   ...demoRouterView,
-  i18n,
-  router
+  router,
+  i18n
 }).$mount('#app')
diff --git a/demo/deploymentInit.js b/demo/deploymentInit.js
deleted file mode 100644
index 819c5e12d..000000000
--- a/demo/deploymentInit.js
+++ /dev/null
@@ -1,220 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-import LandingPage from './documentation/landing'
-import Entry from './entry'
-
-import intro from './documentation/intro/intro'
-import start from './documentation/intro/start'
-import devGuildlines from './documentation/intro/devGuidelines'
-
-import nimbusServiceLayoutDemo from './documentation/deprecated/nimbusServiceLayout'
-import gradientText from './documentation/components/gradientText'
-import checkbox from './documentation/components/checkbox'
-import button from './documentation/components/button'
-import nswitch from './documentation/components/switch'
-import input from './documentation/components/input'
-import select from './documentation/components/select'
-import cascader from './documentation/components/cascader'
-import dynamicInput from './documentation/components/dynamicInput'
-import modal from './documentation/components/modal'
-import message from './documentation/components/message'
-import tooltip from './documentation/components/tooltip'
-import popover from './documentation/components/popover'
-import alert from './documentation/components/alert'
-import datePicker from './documentation/components/datePicker'
-import inputNumber from './documentation/components/inputNumber'
-import radio from './documentation/components/radio'
-import form from './documentation/components/form'
-import tabs from './documentation/components/tabs'
-import timePicker from './documentation/components/timePicker'
-import confirm from './documentation/components/confirm'
-import backTop from './documentation/components/backTop'
-import dropdown from './documentation/components/dropdown'
-import badge from './documentation/components/badge'
-import steps from './documentation/components/steps'
-import notification from './documentation/components/notification'
-import pagination from './documentation/components/pagination'
-import collapse from './documentation/components/collapse'
-import tag from './documentation/components/tag'
-import menu from './documentation/components/menu'
-import timeline from './documentation/components/timeline'
-import progress from './documentation/components/progress'
-import divider from './documentation/components/divider'
-import popconfirm from './documentation/components/popconfirm'
-import anchor from './documentation/components/anchor'
-import popselect from './documentation/components/popselect'
-import configProvider from './documentation/components/configProvider'
-import dataTable from './documentation/components/dataTable'
-import typography from './documentation/components/typography'
-import transfer from './documentation/components/transfer'
-import spin from './documentation/components/spin'
-import drawer from './documentation/components/drawer'
-import loadingBar from './documentation/components/loadingBar'
-import time from './documentation/components/time'
-import slider from './documentation/components/slider'
-import tree from './documentation/components/tree'
-import affix from './documentation/components/affix'
-import statistic from './documentation/components/statistic'
-import grid from './documentation/components/grid'
-import breadcrumb from './documentation/components/breadcrumb'
-import configConsumer from './documentation/components/configConsumer'
-import descriptions from './documentation/components/descriptions'
-import list from './documentation/components/list'
-import card from './documentation/components/card'
-import layout from './documentation/components/layout'
-import avatar from './documentation/components/avatar'
-import result from './documentation/components/result'
-import thing from './documentation/components/thing'
-import autoComplete from './documentation/components/autoComplete'
-import empty from './documentation/components/empty'
-import theme from './documentation/theme'
-import element from './documentation/components/element'
-import log from './documentation/components/log'
-import code from './documentation/components/code'
-import upload from './documentation/components/upload'
-import table from './documentation/components/table'
-
-import DocEntry from './docEntry'
-import ComponentDemo from './utils/ComponentDemo'
-import ComponentDemos from './utils/ComponentDemos'
-import ComponentDocumentation from './utils/ComponentDocumentation'
-import DocumentationWrapper from './utils/DocumentationWrapper'
-import EditOnGithubButton from './utils/EditOnGithubButton'
-import EditOnGithubHeader from './utils/EditOnGithubHeader'
-import './styles/demo.scss'
-
-Vue.use(VueRouter)
-
-Vue.component('ComponentDemo', ComponentDemo)
-Vue.component('ComponentDemos', ComponentDemos)
-Vue.component('DocumentationWrapper', DocumentationWrapper)
-Vue.component('ComponentDocumentation', ComponentDocumentation)
-Vue.component('EditOnGithubButton', EditOnGithubButton)
-Vue.component('EditOnGithubHeader', EditOnGithubHeader)
-
-const withPrefix = (prefix, routes) =>
-  routes.map(route => {
-    route.path = prefix + route.path
-    return route
-  })
-
-const children = [
-  { path: '/intro', component: intro },
-  { path: '/start', component: start },
-  { path: '/dev-guildlines', component: devGuildlines },
-  { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
-  { path: '/n-layout', component: layout },
-  { path: '/n-gradient-text', component: gradientText },
-  {
-    path: '/n-icon',
-    component: () => import('./documentation/components/icon')
-  },
-  { path: '/n-checkbox', component: checkbox },
-  { path: '/n-button', component: button },
-  { path: '/n-switch', component: nswitch },
-  // { path: '/n-table', component: tableDemo },
-  { path: '/n-data-table', component: dataTable },
-  { path: '/n-input', component: input },
-  { path: '/n-select', component: select },
-  { path: '/n-cascader', component: cascader },
-  { path: '/n-custom-dynamic-input', component: dynamicInput },
-  { path: '/n-modal', component: modal },
-  { path: '/n-message', component: message },
-  { path: '/n-tooltip', component: tooltip },
-  { path: '/n-popover', component: popover },
-  { path: '/n-notification', component: notification },
-  { path: '/n-pagination', component: pagination },
-  { path: '/n-alert', component: alert },
-  { path: '/n-date-picker', component: datePicker },
-  { path: '/n-input-number', component: inputNumber },
-  { path: '/n-radio', component: radio },
-  { path: '/n-form', component: form },
-  { path: '/n-tabs', component: tabs },
-  { path: '/n-time-picker', component: timePicker },
-  { path: '/n-confirm', component: confirm },
-  { path: '/n-badge', component: badge },
-  { path: '/n-steps', component: steps },
-  { path: '/n-collapse', component: collapse },
-  { path: '/n-progress', component: progress },
-  { path: '/n-tag', component: tag },
-  { path: '/n-menu', component: menu },
-  { path: '/n-timeline', component: timeline },
-  { path: '/n-back-top', component: backTop },
-  { path: '/n-divider', component: divider },
-  { path: '/n-popconfirm', component: popconfirm },
-  { path: '/n-anchor', component: anchor },
-  { path: '/n-dropdown', component: dropdown },
-  { path: '/n-popselect', component: popselect },
-  { path: '/n-config-provider', component: configProvider },
-  { path: '/n-transfer', component: transfer },
-  { path: '/n-spin', component: spin },
-  { path: '/n-drawer', component: drawer },
-  { path: '/n-loading-bar', component: loadingBar },
-  { path: '/n-time', component: time },
-  { path: '/n-slider', component: slider },
-  { path: '/n-tree', component: tree },
-  { path: '/n-affix', component: affix },
-  { path: '/n-statistic', component: statistic },
-  { path: '/n-grid', component: grid },
-  { path: '/n-breadcrumb', component: breadcrumb },
-  { path: '/n-config-consumer', component: configConsumer },
-  { path: '/n-descriptions', component: descriptions },
-  { path: '/n-list', component: list },
-  { path: '/n-card', component: card },
-  { path: '/n-avatar', component: avatar },
-  { path: '/n-result', component: result },
-  { path: '/n-thing', component: thing },
-  { path: '/n-auto-complete', component: autoComplete },
-  { path: '/n-empty', component: empty },
-  { path: '/n-theme', component: theme },
-  { path: '/n-element', component: element },
-  { path: '/n-log', component: log },
-  { path: '/n-code', component: code },
-  { path: '/n-typography', component: typography },
-  { path: '/n-upload', component: upload },
-  { path: '/n-table', component: table }
-]
-const routes = [
-  {
-    path: '/:lang/:theme',
-    component: Entry,
-    children: [
-      {
-        path: '/:lang/:theme',
-        component: LandingPage,
-        name: 'home'
-      },
-      {
-        path: '/:lang/:theme/doc',
-        component: DocEntry,
-        children: withPrefix('/:lang/:theme/doc', children)
-      }
-    ]
-  },
-  {
-    path: '/*',
-    redirect: '/zh-CN/light'
-  }
-]
-
-const router = new VueRouter({
-  mode: 'history',
-  routes
-})
-
-router.beforeEach(function (to, from, next) {
-  Vue.prototype.$NLoadingBar.theme = to.params.theme
-  if (to.path !== from.path) {
-    Vue.prototype.$NLoadingBar.start()
-  }
-  next()
-})
-
-router.afterEach(function (to, from) {
-  if (to.path !== from.path) {
-    Vue.prototype.$NLoadingBar.finish()
-  }
-})
-
-export { Vue, router }
diff --git a/demo/devIndex.js b/demo/devIndex.js
index e613d4a04..68915f15d 100644
--- a/demo/devIndex.js
+++ b/demo/devIndex.js
@@ -1,16 +1,18 @@
 
-import { Vue, router } from './devInit'
-import i18n from './i18n'
+import { Vue, router, routes, childRoutes, i18n } from './init'
+import debugRouteMixin from './routes/debugRouteMixin'
 import hljs from './hljs'
 import demoRouterView from './demoRouterView'
 import NaiveUI from '../src/index'
 import '../styles/index.scss'
 
+debugRouteMixin(routes, childRoutes)
+
 Vue.use(NaiveUI)
 NaiveUI.setHljs(hljs)
 
 new Vue({
   ...demoRouterView,
-  i18n,
-  router
+  router,
+  i18n
 }).$mount('#app')
diff --git a/demo/devInit.js b/demo/devInit.js
deleted file mode 100644
index d3bf7144c..000000000
--- a/demo/devInit.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-import LandingPage from './documentation/landing'
-import Entry from './entry'
-
-import intro from './documentation/intro/intro'
-import start from './documentation/intro/start'
-import devGuildlines from './documentation/intro/devGuidelines'
-
-import nimbusServiceLayoutDemo from './documentation/deprecated/nimbusServiceLayout'
-import gradientText from './documentation/components/gradientText'
-import checkbox from './documentation/components/checkbox'
-import button from './documentation/components/button'
-import nswitch from './documentation/components/switch'
-import input from './documentation/components/input'
-import select from './documentation/components/select'
-import cascader from './documentation/components/cascader'
-import dynamicInput from './documentation/components/dynamicInput'
-import modal from './documentation/components/modal'
-import message from './documentation/components/message'
-import tooltip from './documentation/components/tooltip'
-import popover from './documentation/components/popover'
-import alert from './documentation/components/alert'
-import datePicker from './documentation/components/datePicker'
-import inputNumber from './documentation/components/inputNumber'
-import radio from './documentation/components/radio'
-import form from './documentation/components/form'
-import tabs from './documentation/components/tabs'
-import timePicker from './documentation/components/timePicker'
-import confirm from './documentation/components/confirm'
-import backTop from './documentation/components/backTop'
-import dropdown from './documentation/components/dropdown'
-import badge from './documentation/components/badge'
-import steps from './documentation/components/steps'
-import notification from './documentation/components/notification'
-import pagination from './documentation/components/pagination'
-import collapse from './documentation/components/collapse'
-import tag from './documentation/components/tag'
-import menu from './documentation/components/menu'
-import timeline from './documentation/components/timeline'
-import progress from './documentation/components/progress'
-import divider from './documentation/components/divider'
-import popconfirm from './documentation/components/popconfirm'
-import anchor from './documentation/components/anchor'
-import popselect from './documentation/components/popselect'
-import configProvider from './documentation/components/configProvider'
-import dataTable from './documentation/components/dataTable'
-import typography from './documentation/components/typography'
-import transfer from './documentation/components/transfer'
-import spin from './documentation/components/spin'
-import drawer from './documentation/components/drawer'
-import loadingBar from './documentation/components/loadingBar'
-import time from './documentation/components/time'
-import slider from './documentation/components/slider'
-import tree from './documentation/components/tree'
-import affix from './documentation/components/affix'
-import statistic from './documentation/components/statistic'
-import grid from './documentation/components/grid'
-import breadcrumb from './documentation/components/breadcrumb'
-import configConsumer from './documentation/components/configConsumer'
-import descriptions from './documentation/components/descriptions'
-import list from './documentation/components/list'
-import card from './documentation/components/card'
-import layout from './documentation/components/layout'
-import avatar from './documentation/components/avatar'
-import result from './documentation/components/result'
-import thing from './documentation/components/thing'
-import autoComplete from './documentation/components/autoComplete'
-import empty from './documentation/components/empty'
-import theme from './documentation/theme'
-import element from './documentation/components/element'
-import log from './documentation/components/log'
-import code from './documentation/components/code'
-import upload from './documentation/components/upload'
-import table from './documentation/components/table'
-
-import DocEntry from './docEntry'
-import ComponentDemo from './utils/ComponentDemo'
-import ComponentDemos from './utils/ComponentDemos'
-import ComponentDocumentation from './utils/ComponentDocumentation'
-import DocumentationWrapper from './utils/DocumentationWrapper'
-import './styles/demo.scss'
-import EditOnGithubButton from './utils/EditOnGithubButton'
-import EditOnGithubHeader from './utils/EditOnGithubHeader'
-
-import routerDebug from './debugComponents/routerDebug'
-import modalDebug from './debugComponents/modalDebug'
-import datePickerDebug from './debugComponents/datePickerDebug'
-import backTopDebug from './debugComponents/backTopDebug'
-import suffixDebug from './debugComponents/suffixDebug'
-import cascaderDebug from './debugComponents/cascaderDebug'
-import verticalAlignDebug from './debugComponents/verticalAlignDebug'
-import iconTransitionDebug from './debugComponents/iconTransitionDebug'
-import selectDebug from './debugComponents/selectDebug'
-import popoverDebug from './debugComponents/popoverDebug'
-import scrollbarDebug from './debugComponents/scrollbarDebug'
-import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
-
-Vue.use(VueRouter)
-
-Vue.component('ComponentDemo', ComponentDemo)
-Vue.component('ComponentDemos', ComponentDemos)
-Vue.component('DocumentationWrapper', DocumentationWrapper)
-Vue.component('ComponentDocumentation', ComponentDocumentation)
-Vue.component('EditOnGithubButton', EditOnGithubButton)
-Vue.component('EditOnGithubHeader', EditOnGithubHeader)
-
-const withPrefix = (prefix, routes) =>
-  routes.map(route => {
-    route.path = prefix + route.path
-    return route
-  })
-
-const children = [
-  { path: '/intro', component: intro },
-  { path: '/start', component: start },
-  { path: '/dev-guildlines', component: devGuildlines },
-  { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
-  { path: '/n-layout', component: layout },
-  { path: '/n-gradient-text', component: gradientText },
-  {
-    path: '/n-icon',
-    component: () => import('./documentation/components/icon')
-  },
-  { path: '/n-checkbox', component: checkbox },
-  { path: '/n-button', component: button },
-  { path: '/n-switch', component: nswitch },
-  // { path: '/n-table', component: tableDemo },
-  { path: '/n-data-table', component: dataTable },
-  { path: '/n-input', component: input },
-  { path: '/n-select', component: select },
-  { path: '/n-cascader', component: cascader },
-  { path: '/n-dynamic-input', component: dynamicInput },
-  { path: '/n-modal', component: modal },
-  { path: '/n-message', component: message },
-  { path: '/n-tooltip', component: tooltip },
-  { path: '/n-popover', component: popover },
-  { path: '/n-notification', component: notification },
-  { path: '/n-pagination', component: pagination },
-  { path: '/n-alert', component: alert },
-  { path: '/n-date-picker', component: datePicker },
-  { path: '/n-input-number', component: inputNumber },
-  { path: '/n-radio', component: radio },
-  { path: '/n-form', component: form },
-  { path: '/n-tabs', component: tabs },
-  { path: '/n-time-picker', component: timePicker },
-  { path: '/n-confirm', component: confirm },
-  { path: '/n-router-debug', component: routerDebug },
-  { path: '/n-modal-debug', component: modalDebug },
-  { path: '/n-scrollbar-debug', component: scrollbarDebug },
-  { path: '/n-badge', component: badge },
-  { path: '/n-steps', component: steps },
-  { path: '/n-collapse', component: collapse },
-  { path: '/n-progress', component: progress },
-  { path: '/n-tag', component: tag },
-  { path: '/n-menu', component: menu },
-  { path: '/n-timeline', component: timeline },
-  { path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
-  { path: '/n-back-top', component: backTop },
-  { path: '/n-date-picker-debug', component: datePickerDebug },
-  { path: '/n-divider', component: divider },
-  { path: '/n-popconfirm', component: popconfirm },
-  { path: '/n-anchor', component: anchor },
-  { path: '/n-dropdown', component: dropdown },
-  { path: '/n-popselect', component: popselect },
-  { path: '/n-config-provider', component: configProvider },
-  { path: '/n--debug', component: suffixDebug },
-  { path: '/n-transfer', component: transfer },
-  { path: '/n-spin', component: spin },
-  { path: '/n-drawer', component: drawer },
-  { path: '/n-loading-bar', component: loadingBar },
-  { path: '/n-time', component: time },
-  { path: '/n-slider', component: slider },
-  { path: '/n-tree', component: tree },
-  { path: '/n-vertical-align-debug', component: verticalAlignDebug },
-  { path: '/n-affix', component: affix },
-  { path: '/n-statistic', component: statistic },
-  { path: '/n-grid', component: grid },
-  { path: '/n-breadcrumb', component: breadcrumb },
-  { path: '/n-config-consumer', component: configConsumer },
-  { path: '/n-descriptions', component: descriptions },
-  { path: '/n-list', component: list },
-  { path: '/n-card', component: card },
-  { path: '/n-avatar', component: avatar },
-  { path: '/n-result', component: result },
-  { path: '/n-thing', component: thing },
-  { path: '/n-auto-complete', component: autoComplete },
-  { path: '/n-empty', component: empty },
-  { path: '/n-theme', component: theme },
-  { path: '/n-element', component: element },
-  { path: '/n-log', component: log },
-  { path: '/n-code', component: code },
-  { path: '/n-typography', component: typography },
-  { path: '/n-upload', component: upload },
-  { path: '/n-table', component: table },
-  {
-    path: '/n-icon-transition-debug',
-    component: iconTransitionDebug
-  },
-  { path: '/n-select-debug', component: selectDebug }
-]
-const routes = [
-  {
-    path: '/:lang/:theme/n-popover-debug',
-    component: popoverDebug
-  },
-  {
-    path: '/n-back-top-debug',
-    component: backTopDebug
-  },
-  {
-    path: '/n-cascader-debug',
-    component: cascaderDebug
-  },
-  {
-    path: '/:lang/:theme',
-    component: Entry,
-    children: [
-      {
-        path: '/:lang/:theme',
-        component: LandingPage,
-        name: 'home'
-      },
-      {
-        path: '/:lang/:theme/doc',
-        component: DocEntry,
-        children: withPrefix('/:lang/:theme/doc', children)
-      }
-    ]
-  },
-  {
-    path: '/*',
-    redirect: '/zh-CN/light'
-  }
-]
-
-const router = new VueRouter({
-  mode: 'history',
-  routes
-})
-
-router.beforeEach(function (to, from, next) {
-  Vue.prototype.$NLoadingBar.theme = to.params.theme
-  if (to.path !== from.path) {
-    Vue.prototype.$NLoadingBar.start()
-  }
-  next()
-})
-
-router.afterEach(function (to, from) {
-  if (to.path !== from.path) {
-    Vue.prototype.$NLoadingBar.finish()
-  }
-})
-export { Vue, router }
diff --git a/demo/documentation/components/collapse/enUS/itemHeaderClick.md b/demo/documentation/components/collapse/enUS/itemHeaderClick.md
index ea653a34f..4a34c7779 100644
--- a/demo/documentation/components/collapse/enUS/itemHeaderClick.md
+++ b/demo/documentation/components/collapse/enUS/itemHeaderClick.md
@@ -1,4 +1,4 @@
-# 点击标题
+# Click on Item Header
 ```html
 <n-collapse
   v-model="activeNames"
diff --git a/demo/entry.vue b/demo/entry.vue
index 6c4c05489..87fe47930 100644
--- a/demo/entry.vue
+++ b/demo/entry.vue
@@ -1,5 +1,10 @@
 <template>
-  <n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme" :language="lang">
+  <n-config-provider
+    class="demo"
+    namespace="naive-ui-doc"
+    :theme="theme"
+    :language="lang"
+  >
     <n-layout position="absolute" class="root-layout">
       <doc-header
         :lang="lang"
@@ -17,7 +22,7 @@
 <script>
 import DocHeader from './header.vue'
 import menuOptions from './menuOptions'
-import i18n from './i18n'
+import { i18n } from './init'
 import { state } from './store'
 
 export default {
diff --git a/demo/i18n.js b/demo/i18n.js
deleted file mode 100644
index 453f3b886..000000000
--- a/demo/i18n.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-Vue.use(VueI18n)
-export default new VueI18n({
-  locale: 'en-US'
-})
diff --git a/demo/init.js b/demo/init.js
new file mode 100644
index 000000000..4b970f766
--- /dev/null
+++ b/demo/init.js
@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import VueI18n from 'vue-i18n'
+import ComponentDemo from './utils/ComponentDemo'
+import ComponentDemos from './utils/ComponentDemos'
+import ComponentDocumentation from './utils/ComponentDocumentation'
+import DocumentationWrapper from './utils/DocumentationWrapper'
+import EditOnGithubButton from './utils/EditOnGithubButton'
+import EditOnGithubHeader from './utils/EditOnGithubHeader'
+import { routes, childRoutes } from './routes/routes'
+import './styles/demo.scss'
+
+Vue.use(VueRouter)
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+  locale: 'zh-CN'
+})
+
+Vue.component('ComponentDemo', ComponentDemo)
+Vue.component('ComponentDemos', ComponentDemos)
+Vue.component('DocumentationWrapper', DocumentationWrapper)
+Vue.component('ComponentDocumentation', ComponentDocumentation)
+Vue.component('EditOnGithubButton', EditOnGithubButton)
+Vue.component('EditOnGithubHeader', EditOnGithubHeader)
+
+const router = new VueRouter({
+  mode: 'history',
+  routes
+})
+
+router.beforeEach(function (to, from, next) {
+  Vue.prototype.$NLoadingBar.theme = to.params.theme
+  if (to.path !== from.path) {
+    Vue.prototype.$NLoadingBar.start()
+  }
+  next()
+})
+
+router.afterEach(function (to, from) {
+  if (to.path !== from.path) {
+    Vue.prototype.$NLoadingBar.finish()
+  }
+})
+
+export { Vue, router, routes, childRoutes, i18n }
diff --git a/demo/routes/debugRouteMixin.js b/demo/routes/debugRouteMixin.js
new file mode 100644
index 000000000..b63e73dcb
--- /dev/null
+++ b/demo/routes/debugRouteMixin.js
@@ -0,0 +1,46 @@
+import routerDebug from '../debugComponents/routerDebug'
+import modalDebug from '../debugComponents/modalDebug'
+import datePickerDebug from '../debugComponents/datePickerDebug'
+import backTopDebug from '../debugComponents/backTopDebug'
+import suffixDebug from '../debugComponents/suffixDebug'
+import cascaderDebug from '../debugComponents/cascaderDebug'
+import verticalAlignDebug from '../debugComponents/verticalAlignDebug'
+import iconTransitionDebug from '../debugComponents/iconTransitionDebug'
+import selectDebug from '../debugComponents/selectDebug'
+import popoverDebug from '../debugComponents/popoverDebug'
+import scrollbarDebug from '../debugComponents/scrollbarDebug'
+import scrollbarDebug2 from '../debugComponents/scrollbarDebug2'
+
+import { withPrefix } from './utils'
+
+const RootDebugRoutes = [
+  {
+    path: '/n-popover-debug',
+    component: popoverDebug
+  },
+  {
+    path: '/n-back-top-debug',
+    component: backTopDebug
+  },
+  {
+    path: '/n-cascader-debug',
+    component: cascaderDebug
+  }
+]
+
+const ChildDebugRoutes = [
+  { path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
+  { path: '/n-date-picker-debug', component: datePickerDebug },
+  { path: '/n--debug', component: suffixDebug },
+  { path: '/n-vertical-align-debug', component: verticalAlignDebug },
+  { path: '/n-icon-transition-debug', component: iconTransitionDebug },
+  { path: '/n-select-debug', component: selectDebug },
+  { path: '/n-router-debug', component: routerDebug },
+  { path: '/n-modal-debug', component: modalDebug },
+  { path: '/n-scrollbar-debug', component: scrollbarDebug }
+]
+
+export default function debugRouteMixin (routes, childRoutes) {
+  routes.unshift(RootDebugRoutes)
+  childRoutes.unshift(withPrefix('/:lang/:theme/doc', ChildDebugRoutes))
+}
diff --git a/demo/routes/routes.js b/demo/routes/routes.js
new file mode 100644
index 000000000..152883619
--- /dev/null
+++ b/demo/routes/routes.js
@@ -0,0 +1,177 @@
+
+import LandingPage from '../documentation/landing'
+import Entry from '../entry'
+
+import intro from '../documentation/intro/intro'
+import start from '../documentation/intro/start'
+import devGuildlines from '../documentation/intro/devGuidelines'
+
+import nimbusServiceLayoutDemo from '../documentation/deprecated/nimbusServiceLayout'
+import gradientText from '../documentation/components/gradientText'
+import checkbox from '../documentation/components/checkbox'
+import button from '../documentation/components/button'
+import nswitch from '../documentation/components/switch'
+import input from '../documentation/components/input'
+import select from '../documentation/components/select'
+import cascader from '../documentation/components/cascader'
+import dynamicInput from '../documentation/components/dynamicInput'
+import modal from '../documentation/components/modal'
+import message from '../documentation/components/message'
+import tooltip from '../documentation/components/tooltip'
+import popover from '../documentation/components/popover'
+import alert from '../documentation/components/alert'
+import datePicker from '../documentation/components/datePicker'
+import inputNumber from '../documentation/components/inputNumber'
+import radio from '../documentation/components/radio'
+import form from '../documentation/components/form'
+import tabs from '../documentation/components/tabs'
+import timePicker from '../documentation/components/timePicker'
+import confirm from '../documentation/components/confirm'
+import backTop from '../documentation/components/backTop'
+import dropdown from '../documentation/components/dropdown'
+import badge from '../documentation/components/badge'
+import steps from '../documentation/components/steps'
+import notification from '../documentation/components/notification'
+import pagination from '../documentation/components/pagination'
+import collapse from '../documentation/components/collapse'
+import tag from '../documentation/components/tag'
+import menu from '../documentation/components/menu'
+import timeline from '../documentation/components/timeline'
+import progress from '../documentation/components/progress'
+import divider from '../documentation/components/divider'
+import popconfirm from '../documentation/components/popconfirm'
+import anchor from '../documentation/components/anchor'
+import popselect from '../documentation/components/popselect'
+import configProvider from '../documentation/components/configProvider'
+import dataTable from '../documentation/components/dataTable'
+import typography from '../documentation/components/typography'
+import transfer from '../documentation/components/transfer'
+import spin from '../documentation/components/spin'
+import drawer from '../documentation/components/drawer'
+import loadingBar from '../documentation/components/loadingBar'
+import time from '../documentation/components/time'
+import slider from '../documentation/components/slider'
+import tree from '../documentation/components/tree'
+import affix from '../documentation/components/affix'
+import statistic from '../documentation/components/statistic'
+import grid from '../documentation/components/grid'
+import breadcrumb from '../documentation/components/breadcrumb'
+import configConsumer from '../documentation/components/configConsumer'
+import descriptions from '../documentation/components/descriptions'
+import list from '../documentation/components/list'
+import card from '../documentation/components/card'
+import layout from '../documentation/components/layout'
+import avatar from '../documentation/components/avatar'
+import result from '../documentation/components/result'
+import thing from '../documentation/components/thing'
+import autoComplete from '../documentation/components/autoComplete'
+import empty from '../documentation/components/empty'
+import theme from '../documentation/theme'
+import element from '../documentation/components/element'
+import log from '../documentation/components/log'
+import code from '../documentation/components/code'
+import upload from '../documentation/components/upload'
+import table from '../documentation/components/table'
+
+import DocEntry from '../docEntry'
+
+import { withPrefix } from './utils'
+
+export const childRoutes = [
+  { path: '/intro', component: intro },
+  { path: '/start', component: start },
+  { path: '/dev-guildlines', component: devGuildlines },
+  { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
+  { path: '/n-layout', component: layout },
+  { path: '/n-gradient-text', component: gradientText },
+  {
+    path: '/n-icon',
+    component: () => import('../documentation/components/icon')
+  },
+  { path: '/n-checkbox', component: checkbox },
+  { path: '/n-button', component: button },
+  { path: '/n-switch', component: nswitch },
+  { path: '/n-data-table', component: dataTable },
+  { path: '/n-input', component: input },
+  { path: '/n-select', component: select },
+  { path: '/n-cascader', component: cascader },
+  { path: '/n-dynamic-input', component: dynamicInput },
+  { path: '/n-modal', component: modal },
+  { path: '/n-message', component: message },
+  { path: '/n-tooltip', component: tooltip },
+  { path: '/n-popover', component: popover },
+  { path: '/n-notification', component: notification },
+  { path: '/n-pagination', component: pagination },
+  { path: '/n-alert', component: alert },
+  { path: '/n-date-picker', component: datePicker },
+  { path: '/n-input-number', component: inputNumber },
+  { path: '/n-radio', component: radio },
+  { path: '/n-form', component: form },
+  { path: '/n-tabs', component: tabs },
+  { path: '/n-time-picker', component: timePicker },
+  { path: '/n-confirm', component: confirm },
+  { path: '/n-badge', component: badge },
+  { path: '/n-steps', component: steps },
+  { path: '/n-collapse', component: collapse },
+  { path: '/n-progress', component: progress },
+  { path: '/n-tag', component: tag },
+  { path: '/n-menu', component: menu },
+  { path: '/n-timeline', component: timeline },
+  { path: '/n-back-top', component: backTop },
+  { path: '/n-divider', component: divider },
+  { path: '/n-popconfirm', component: popconfirm },
+  { path: '/n-anchor', component: anchor },
+  { path: '/n-dropdown', component: dropdown },
+  { path: '/n-popselect', component: popselect },
+  { path: '/n-config-provider', component: configProvider },
+  { path: '/n-transfer', component: transfer },
+  { path: '/n-spin', component: spin },
+  { path: '/n-drawer', component: drawer },
+  { path: '/n-loading-bar', component: loadingBar },
+  { path: '/n-time', component: time },
+  { path: '/n-slider', component: slider },
+  { path: '/n-tree', component: tree },
+  { path: '/n-affix', component: affix },
+  { path: '/n-statistic', component: statistic },
+  { path: '/n-grid', component: grid },
+  { path: '/n-breadcrumb', component: breadcrumb },
+  { path: '/n-config-consumer', component: configConsumer },
+  { path: '/n-descriptions', component: descriptions },
+  { path: '/n-list', component: list },
+  { path: '/n-card', component: card },
+  { path: '/n-avatar', component: avatar },
+  { path: '/n-result', component: result },
+  { path: '/n-thing', component: thing },
+  { path: '/n-auto-complete', component: autoComplete },
+  { path: '/n-empty', component: empty },
+  { path: '/n-theme', component: theme },
+  { path: '/n-element', component: element },
+  { path: '/n-log', component: log },
+  { path: '/n-code', component: code },
+  { path: '/n-typography', component: typography },
+  { path: '/n-upload', component: upload },
+  { path: '/n-table', component: table }
+]
+
+export const routes = [
+  {
+    path: '/:lang/:theme',
+    component: Entry,
+    children: [
+      {
+        path: '/:lang/:theme',
+        component: LandingPage,
+        name: 'home'
+      },
+      {
+        path: '/:lang/:theme/doc',
+        component: DocEntry,
+        children: withPrefix('/:lang/:theme/doc', childRoutes)
+      }
+    ]
+  },
+  {
+    path: '/*',
+    redirect: '/zh-CN/light'
+  }
+]
diff --git a/demo/routes/utils.js b/demo/routes/utils.js
new file mode 100644
index 000000000..35b7d4b35
--- /dev/null
+++ b/demo/routes/utils.js
@@ -0,0 +1,6 @@
+export const withPrefix = (prefix, routes) => {
+  return routes.map(route => {
+    route.path = prefix + route.path
+    return route
+  })
+}
diff --git a/demo/utils.js b/demo/utils.js
deleted file mode 100644
index b6c2afafe..000000000
--- a/demo/utils.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/* eslint-disable */
-import emojiRegex from 'emoji-regex';
-const regex = emojiRegex();
-const emojiUnicode = require("emoji-unicode")
-/**
- *
- * Here's a thing that will look through all the text nodes of a document, and
- * upon encountering an emoji codepoint, will replace it with an image.
- * For now, those images are pulled from GitHub, which isn't very nice, so I
- * need to find a more suitable host.
- *
- * Much of this code was gleaned from staring at the minified GitHub JS.
- *
- * Copyright (c) 2013 Mark Wunsch. Licensed under the MIT License.
- * @markwunsch
- *
- */
-export const replaceEmojiWithImages = function (root) {
-
-  var REGIONAL_INDICATOR_A = parseInt("1f1e6", 16),
-      REGIONAL_INDICATOR_Z = parseInt("1f1ff", 16),
-      IMAGE_HOST = "github.githubassets.com",
-      IMAGE_PATH = "/images/icons/emoji/unicode/",
-      IMAGE_EXT = ".png";
-
-  // String.fromCodePoint is super helpful
-  if (!String.fromCodePoint) {
-    /*!
-     * ES6 Unicode Shims 0.1
-     * (c) 2012 Steven Levithan <http://slevithan.com/>
-     * MIT License
-     **/
-    String.fromCodePoint = function fromCodePoint () {
-      var chars = [], point, offset, units, i;
-      for (i = 0; i < arguments.length; ++i) {
-        point = arguments[i];
-        offset = point - 0x10000;
-        units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
-        chars.push(String.fromCharCode.apply(null, units));
-      }
-      return chars.join("");
-    }
-  }
-
-  /**
-   * Create a treewalker to walk an element and return an Array of Text Nodes.
-   * This function is (hopefully) smart enough to exclude unwanted text nodes
-   * like whitespace and script tags.
-   * https://gist.github.com/mwunsch/4693383
-   */
-  function getLegitTextNodes(element) {
-    if (!document.createTreeWalker) return [];
-
-    var blacklist = ['SCRIPT', 'OPTION', 'TEXTAREA'],
-        textNodes = [],
-        walker = document.createTreeWalker(
-            element,
-            NodeFilter.SHOW_TEXT,
-            function excludeBlacklistedNodes(node) {
-              if (blacklist.indexOf(node.parentElement.nodeName.toUpperCase()) >= 0) return NodeFilter.FILTER_REJECT;
-              if (String.prototype.trim && !node.nodeValue.trim().length) return NodeFilter.FILTER_SKIP;
-              return NodeFilter.FILTER_ACCEPT;
-            },
-            false
-        );
-
-    while(walker.nextNode()) textNodes.push(walker.currentNode);
-
-    return textNodes;
-  }
-
-  /**
-   * For a UTF-16 (JavaScript's preferred encoding...kinda) surrogate pair,
-   * return a Unicode codepoint.
-   */
-  function surrogatePairToCodepoint(lead, trail) {
-    return (lead - 0xD800) * 0x400 + (trail - 0xDC00) + 0x10000;
-  }
-
-  /**
-   * Get an Image element for an emoji codepoint (in hex).
-   */
-  function getImageForCodepoint(hex) {
-    var img = document.createElement('IMG');
-
-    img.style.width = "1.4em";
-    img.style.verticalAlign = "top";
-    img.src = "//" + IMAGE_HOST + IMAGE_PATH + hex + IMAGE_EXT;
-
-    return img;
-  }
-
-  /**
-   * Convert an HTML string into a DocumentFragment, for insertion into the dom.
-   */
-  function fragmentForString(htmlString) {
-    var tmpDoc = document.createElement('DIV'),
-        fragment = document.createDocumentFragment(),
-        childNode;
-
-    tmpDoc.innerHTML = htmlString;
-
-    while(childNode = tmpDoc.firstChild) {
-      fragment.appendChild(childNode);
-    }
-    return fragment;
-  }
-
-  /**
-   * Iterate through a list of nodes, find emoji, replace with images.
-   */
-  function emojiReplace(nodes) {
-    var PATTERN = regex;
-
-    nodes.forEach(function (node) {
-      var replacement,
-          value = node.nodeValue,
-          matches = value.match(PATTERN);
-
-      if (matches) {
-        replacement = value.replace(PATTERN, function (match) {
-          var codepoint = emojiUnicode(matches[0]),
-              img = getImageForCodepoint(codepoint);
-          return img.outerHTML;
-        });
-        // console.log(matches)
-        node.parentNode.replaceChild(fragmentForString(replacement), node);
-      }
-    });
-  }
-
-  // Call everything we've defined
-  emojiReplace(getLegitTextNodes(root));
-}
\ No newline at end of file
diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue
index 0be904701..1d3b6e782 100644
--- a/demo/utils/ComponentDemo.vue
+++ b/demo/utils/ComponentDemo.vue
@@ -35,7 +35,7 @@
         >
           <template v-slot:activator>
             <edit-on-github-button
-              class="edit-button"
+              style="padding: 0 3px 0 7px"
               :url="url"
             />
           </template>
diff --git a/demo/utils/EditOnGithubButton.vue b/demo/utils/EditOnGithubButton.vue
index 6ba461ab6..4b9558c16 100644
--- a/demo/utils/EditOnGithubButton.vue
+++ b/demo/utils/EditOnGithubButton.vue
@@ -3,6 +3,8 @@
     class="edit-button"
     ghost
     round
+    :size="size"
+    :text="text"
     @click="handleEditOnGithubClick"
   >
     <template v-slot:icon>
@@ -10,8 +12,10 @@
     </template>
   </n-button>
 </template>
+
 <script>
 import createOutline from '../../src/_icons/create-outline'
+
 export default {
   name: 'EditOnGithubButton',
   components: {
@@ -21,6 +25,14 @@ export default {
     url: {
       type: String,
       required: true
+    },
+    text: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: undefined
     }
   },
   data () {
@@ -40,8 +52,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-  .edit-button {
-    vertical-align: middle;
-  }
-</style>
diff --git a/demo/utils/EditOnGithubHeader.vue b/demo/utils/EditOnGithubHeader.vue
index 0812e58f9..49023859c 100644
--- a/demo/utils/EditOnGithubHeader.vue
+++ b/demo/utils/EditOnGithubHeader.vue
@@ -1,32 +1,39 @@
 
- <i18n>
-    {
-    "zh-CN": {
+<i18n>
+{
+  "zh-CN": {
     "editOnGithub": "在 Github 上编辑"
     },
-    "en-US": {
+  "en-US": {
     "editOnGithub": "Edit on Github"
-    }
-    }
-  </i18n>
+  }
+}
+</i18n>
+
 <template>
-  <n-h1 :id="id">
+  <n-h1 :id="id" class="naive-doc-title">
     {{ text }}
-    <n-tooltip
-      :delay="300"
-      :placement="'top'"
-      :show-arrow="true"
-    >
-      <template v-slot:activator>
-        <edit-on-github-button
-          class="edit-button"
-          :url="url"
-        />
-      </template>
-      {{ $t('editOnGithub') }}
-    </n-tooltip>
+    <span class="edit-button">
+      <n-tooltip
+        :delay="300"
+        placement="right"
+        :show-arrow="true"
+      >
+        <template v-slot:activator>
+          <edit-on-github-button
+            style="vertical-align: middle;"
+            text
+            size="large"
+            class="edit-button"
+            :url="url"
+          />
+        </template>
+        {{ $t('editOnGithub') }}
+      </n-tooltip>
+    </span>
   </n-h1>
 </template>
+
 <script>
 export default {
   name: 'EditOnGithubHeader',
@@ -47,8 +54,16 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-  .edit-button {
-    margin-left: 10px;
-  }
+
+<style scoped>
+.naive-doc-title .edit-button {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
+}
+
+.naive-doc-title:hover .edit-button {
+  opacity: 1;
+}
 </style>