update: router, pages and layouts

Author: wangcch

src/layouts/defaultLayout.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="defalut-layout">
+    <h1>vue-template</h1>
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'defalut-layout',
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.defalut-layout {
+  text-align: center;
+}
+</style>

src/pages/About.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="about">
+    <h2>about</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'about',
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/Err404.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="err-404">
+    <p>404</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'err-404',
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/pages/Err500.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="err-500">
+    <p>500</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'err-500',
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/pages/Home.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="home">
+    <h2>{{ msg }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/index.js

@@ -1,15 +1,54 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+
+import defaultLayout from '@/layouts/defaultLayout'
+
+import Home from '@/pages/Home'
+import About from '@/pages/About'
+import Err404 from '@/pages/Err404'
+import Err500 from '@/pages/Err500'
 
 Vue.use(Router)
 
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
-    }
-  ]
+export const constantRouter = [
+  {
+    path: '/',
+    component: defaultLayout,
+    redirect: 'home',
+    children: [
+      {
+        path: 'home',
+        component: Home,
+        name: 'home'
+      },
+      {
+        path: 'about',
+        component: About,
+        name: 'about'
+      }
+    ]
+  },
+  {
+    path: '*',
+    component: defaultLayout,
+    redirect: 'err404',
+    children: [
+      {
+        path: 'err404',
+        component: Err404,
+        name: 'err404'
+      },
+      {
+        path: 'err500',
+        component: Err500,
+        name: 'err500'
+      }
+    ]
+  }
+]
+
+const router = new Router({
+  routes: constantRouter
 })
+
+export default router