完成 vue-router 部分

xiaoqiang-zhao · Dec 12, 2016 · 835bdbb · 835bdbb
1 parent bb76f83
commit 835bdbb
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -196,8 +196,86 @@ js 部分：
 
     npm install [email protected] --save
 
+然后就可以创建几个页面来使用路由了，下面是几处关键代码：
+
+html：
+
+    <div id="app">
+        <router-view></router-view>
+    </div>
+
+index.js
+
+    var Vue = require('vue');
+    var VueRouter = require('vue-router');
+    var routerConfig = require('./router-config');
+
+    var router = new VueRouter({
+        transitionOnLoad: false,
+        routes: routerConfig
+    });
+
+    Vue.use(VueRouter);
+
+    new Vue({
+        router: router
+    }).$mount('#app');
+
+其中用到的 `router-config` 配置文件 `router-config.js` 的代码：
+
+    var PageA = require('./page/page-a');
+    var PageB = require('./page/page-b');
+
+    module.exports = [
+        {
+            path: '/',
+            component: PageA
+        },
+        {
+            name: 'pageA',
+            path: '/page/a',
+            component: PageA
+        },
+        {
+            name: 'pageB',
+            path: '/page/b',
+            component: PageB
+        }
+    ];
+
+其中页面 `./page/page-a` 的代码 `./page/page-a/index.vue`：
+
+    <template>
+        <div>
+            当前页面：Page A
+            <div>
+                <router-link to="/page/b"> 跳转到 Page B </router-link>
+            </div>
+        </div>
+    </template>
+    <script>
+        module.exports = {
+            data: function () {
+                return {};
+            }
+        };
+    </script>
+    <style>
+        div {
+            padding: 20px;
+            text-align: center;
+            color: red;
+        }
+    </style>
+
+其中 `Vue.use(VueRouter)` 容易被忽略，官网有这么一句話： 
+
+    0. If using a module system (e.g. via vue-cli), import Vue and VueRouter and then call Vue.use(VueRouter).
+
+如果使用模块化机制编程，需要调用 `Vue.use(VueRouter)`。
+
 ## 参考
 
 [Standalone-vs-Runtime-only-Build](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build)
 
-
+[vue router getting started](http://router.vuejs.org/en/essentials/getting-started.html)    
diff --git a/dist/index.html b/dist/index.html
@@ -6,8 +6,7 @@
 </head>
 <body>
 <div id="app">
-    <comp-a></comp-a>
-    <comp-b></comp-b>
+    <router-view></router-view>
 </div>
 <script src="./index.js"></script>
 </body>

diff --git a/src/append.js b/src/append.js
diff --git a/src/index.js b/src/index.js
@@ -4,16 +4,16 @@
  * Created by zhaoxiaoqiang on 2016/12/8.
  */
 var Vue = require('vue');
-var CompA = require('./components/a');
-var CompB = require('./components/b');
+var VueRouter = require('vue-router');
+var routerConfig = require('./router-config');
+
+var router = new VueRouter({
+    transitionOnLoad: false,
+    routes: routerConfig
+});
+
+Vue.use(VueRouter);
 
 new Vue({
-    el: '#app',
-    components: {
-      compA: CompA,
-      compB: CompB,
-    },
-    data: {
-        name: 'test'
-    }
-});
+    router: router
+}).$mount('#app');
diff --git a/src/page/page-a/index.vue b/src/page/page-a/index.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        当前页面：Page A
+        <div>
+            <router-link to="/page/b"> 跳转到 Page B </router-link>
+        </div>
+    </div>
+</template>
+<script>
+    module.exports = {
+        data: function () {
+            return {};
+        }
+    };
+</script>
+<style>
+    div {
+        padding: 20px;
+        text-align: center;
+        color: red;
+    }
+</style>
diff --git a/src/page/page-b/index.vue b/src/page/page-b/index.vue
@@ -0,0 +1,20 @@
+
+<template>
+    <div>
+        Page B
+    </div>
+</template>
+<script>
+    module.exports = {
+        data: function () {
+            return {};
+        }
+    };
+</script>
+<style>
+    div {
+        padding: 20px;
+        text-align: center;
+        color: red;
+    }
+</style>
diff --git a/src/router-config.js b/src/router-config.js
@@ -0,0 +1,25 @@
+/**
+ * 路由配置文件
+ *
+ * Created by zhaoxiaoqiang on 2016/12/11.
+ */
+
+var PageA = require('./page/page-a');
+var PageB = require('./page/page-b');
+
+module.exports = [
+    {
+        path: '/',
+        component: PageA
+    },
+    {
+        name: 'pageA',
+        path: '/page/a',
+        component: PageA
+    },
+    {
+        name: 'pageB',
+        path: '/page/b',
+        component: PageB
+    }
+];