add: 增加vue-router对应mode:history模式的实例🚀

Thunf · Aug 23, 2017 · b15ea09 · b15ea09
1 parent 3af1df8
commit b15ea09
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 0 deletions.
diff --git a/controller/history.js b/controller/history.js
@@ -0,0 +1,34 @@
+'use strict';
+
+/**
+ * ['/history/page']
+ * The path used by history mode
+ */
+exports.page = function*() {
+  yield this.bindDefault()
+
+  yield this.render('history', {
+    siteInfo: this.siteInfo
+  })
+}
+/**
+ * Match all path (begins with '/history/page/').
+ * Such as: /history/page/:any-words/:any-times/...
+ */
+exports.page.__regular__ = /^\/history\/page\/(?:.*)(?:\/(?=$))?$/
+
+/**
+ * ['/history' & '/history/page']
+ * Make the index path redirect to history path automatically
+ */
+exports.index = exports.page
+
+/**
+ * ['/history/ajax']
+ * Other paths to do other things
+ */
+exports.ajax = {
+  demo: function*() {
+    yield this.proxy(`http://${this.host}/ajax/test/1`)
+  }
+}
diff --git a/vues/history/index.js b/vues/history/index.js
@@ -0,0 +1,31 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import VueResource from 'vue-resource'
+import routes from './router.js'
+import App from './index.vue'
+
+// 初始化路由
+/* eslint-disable no-new */
+const router = new VueRouter(routes)
+
+// 置入组件
+Vue.use(VueRouter)
+Vue.use(VueResource)
+
+new Vue({
+  /**
+   * 提供的元素只能作为挂载点。
+   * 不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。
+   * 因此不推荐挂载root实例到 <html> 或者 <body> 上。
+   */
+  el: '#app',
+  template: '<App/>',
+  components: { App },
+  /**
+   * 置入路由
+   */
+  router
+})
+/* eslint-enable no-new */
diff --git a/vues/history/index.vue b/vues/history/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div id="history">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'history'
+}
+</script>
+
+<style lang="less">
+#history{
+  /* some style */
+}
+</style>
diff --git a/vues/history/router.js b/vues/history/router.js
@@ -0,0 +1,42 @@
+const prefix = '/history/page'
+
+function getDemoHtml (path) {
+  return `<div>
+    <a href="${prefix}${path}">
+      &lt;a&gt; will Reload-The-Page as usual!
+    </a>
+    <br>
+    <router-link to="${prefix}${path}">
+      &lt;router-link&gt; use real History api!
+    </router-link>
+    <span style="color: red;">[use this!]</span>
+  </div>`
+}
+
+module.exports = {
+  mode: 'history',
+  routes: [{
+    path: `${prefix}/index`,
+    component: {
+      template: getDemoHtml('/list')
+    }
+  }, {
+    path: `${prefix}/list`,
+    component: {
+      template: getDemoHtml('/test')
+    }
+  }, {
+    path: `${prefix}/test`,
+    component: {
+      template: getDemoHtml(`/test/${Math.random().toString(36).substring(2)}`)
+    }
+  }, {
+    path: `${prefix}/test/:test`,
+    component: {
+      template: getDemoHtml('/index')
+    }
+  }, {
+    path: '*',
+    redirect: `${prefix}/index`
+  }]
+}