diff --git a/docs/README.md b/docs/README.md
index 3cd3d75032..36f06654eb 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -15,6 +15,8 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
 
 ### As Easy as 1, 2, 3
 
+- [尤](./尤.md)
+
 ``` bash
 # install
 yarn global add vuepress # OR npm install -g vuepress
diff --git "a/docs/\345\260\244.md" "b/docs/\345\260\244.md"
new file mode 100644
index 0000000000..c25cdf563c
--- /dev/null
+++ "b/docs/\345\260\244.md"
@@ -0,0 +1,3 @@
+# 尤
+
+- [雨](./雨.md)
diff --git "a/docs/\346\272\252.md" "b/docs/\346\272\252.md"
new file mode 100644
index 0000000000..e67ecac260
--- /dev/null
+++ "b/docs/\346\272\252.md"
@@ -0,0 +1,3 @@
+# 溪
+
+- [Homepage](./)
diff --git "a/docs/\351\233\250.md" "b/docs/\351\233\250.md"
new file mode 100644
index 0000000000..ebef4579eb
--- /dev/null
+++ "b/docs/\351\233\250.md"
@@ -0,0 +1,3 @@
+# 雨
+
+- [溪](./溪.md)
diff --git a/lib/app/Content.js b/lib/app/Content.js
index 4b3b4c88f5..46628195e6 100644
--- a/lib/app/Content.js
+++ b/lib/app/Content.js
@@ -1,5 +1,3 @@
-import { pathToComponentName } from './util'
-
 export default {
   functional: true,
 
@@ -11,7 +9,7 @@ export default {
   },
 
   render (h, { parent, props, data }) {
-    return h(pathToComponentName(parent.$page.path), {
+    return h(parent.$page.key, {
       class: [props.custom ? 'custom' : '', data.class, data.staticClass],
       style: data.style
     })
diff --git a/lib/app/util.js b/lib/app/util.js
index ceafb220c6..c11172240e 100644
--- a/lib/app/util.js
+++ b/lib/app/util.js
@@ -5,14 +5,6 @@ export function injectMixins (options, mixins) {
   options.mixins.push(...mixins)
 }
 
-export function pathToComponentName (path) {
-  if (path.charAt(path.length - 1) === '/') {
-    return `page${path.replace(/\//g, '-') + 'index'}`
-  } else {
-    return `page${path.replace(/\//g, '-').replace(/\.html$/, '')}`
-  }
-}
-
 export function findPageForPath (pages, path) {
   for (let i = 0; i < pages.length; i++) {
     const page = pages[i]
diff --git a/lib/build.js b/lib/build.js
index 149f9f93a0..b96f1096b4 100644
--- a/lib/build.js
+++ b/lib/build.js
@@ -153,7 +153,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
       console.error(chalk.red(`Error rendering ${pagePath}:`))
       throw e
     }
-    const filename = pagePath.replace(/\/$/, '/index.html').replace(/^\//, '')
+    const filename = decodeURIComponent(pagePath.replace(/\/$/, '/index.html').replace(/^\//, ''))
     const filePath = path.resolve(outDir, filename)
     await fs.ensureDir(path.dirname(filePath))
     await fs.writeFile(filePath, html)
diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue
index 329b8e2ebd..7b422a41fa 100644
--- a/lib/default-theme/Layout.vue
+++ b/lib/default-theme/Layout.vue
@@ -27,7 +27,6 @@ import Home from './Home.vue'
 import Navbar from './Navbar.vue'
 import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
-import { pathToComponentName } from '@app/util'
 import { resolveSidebarItems } from './util'
 
 export default {
@@ -86,11 +85,13 @@ export default {
   },
 
   mounted () {
+    window.addEventListener('scroll', this.onScroll)
+
     // configure progress bar
     nprogress.configure({ showSpinner: false })
 
     this.$router.beforeEach((to, from, next) => {
-      if (to.path !== from.path && !Vue.component(pathToComponentName(to.path))) {
+      if (to.path !== from.path && !Vue.component(to.name)) {
         nprogress.start()
       }
       next()
diff --git a/lib/prepare.js b/lib/prepare.js
index 28bffafa73..eaecbee09a 100644
--- a/lib/prepare.js
+++ b/lib/prepare.js
@@ -5,6 +5,7 @@ const createMarkdown = require('./markdown')
 const loadConfig = require('./util/loadConfig')
 const tempPath = path.resolve(__dirname, 'app/.temp')
 const {
+  encodePath,
   inferTitle,
   extractHeaders,
   parseFrontmatter,
@@ -181,8 +182,10 @@ async function resolveOptions (sourceDir) {
   // resolve pagesData
   const pagesData = await Promise.all(pageFiles.map(async (file) => {
     const filepath = path.resolve(sourceDir, file)
+    const key = 'v-' + Math.random().toString(16).slice(2)
     const data = {
-      path: fileToPath(file)
+      key,
+      path: encodePath(fileToPath(file))
     }
 
     if (shouldResolveLastUpdated) {
@@ -296,21 +299,31 @@ async function resolveComponents (sourceDir) {
 }
 
 async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
-  function genRoute ({ path: pagePath }, index) {
+  function genRoute ({ path: pagePath, key: componentName }, index) {
     const file = pageFiles[index]
     const filePath = path.resolve(sourceDir, file)
     let code = `
   {
+    name: ${JSON.stringify(componentName)},
     path: ${JSON.stringify(pagePath)},
     component: ThemeLayout,
     beforeEnter: (to, from, next) => {
       import(${JSON.stringify(filePath)}).then(comp => {
-        Vue.component(${JSON.stringify(fileToComponentName(file))}, comp.default)
+        Vue.component(${JSON.stringify(componentName)}, comp.default)
         next()
       })
     }
   }`
 
+    const dncodedPath = decodeURIComponent(pagePath)
+    if (dncodedPath !== pagePath) {
+      code += `,
+  {
+    path: ${JSON.stringify(dncodedPath)},
+    redirect: ${JSON.stringify(pagePath)}
+  }`
+    }
+
     if (/\/$/.test(pagePath)) {
       code += `,
   {
diff --git a/lib/util/index.js b/lib/util/index.js
index b9266dc85e..b881b5fb9d 100644
--- a/lib/util/index.js
+++ b/lib/util/index.js
@@ -1,6 +1,10 @@
 const spawn = require('cross-spawn')
 const parseHeaders = require('./parseHeaders')
 
+exports.encodePath = function (path) {
+  return path.split('/').map(item => encodeURIComponent(item)).join('/')
+}
+
 exports.parseHeaders = parseHeaders
 
 exports.normalizeHeadTag = tag => {