ok

src/App.vue

@@ -1,32 +1,32 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    
+
     </div>
     <router-view/>
   </div>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+// #app {
+//   font-family: 'Avenir', Helvetica, Arial, sans-serif;
+//   -webkit-font-smoothing: antialiased;
+//   -moz-osx-font-smoothing: grayscale;
+//   text-align: center;
+//   color: #2c3e50;
+// }
 
-#nav {
-  padding: 30px;
+// #nav {
+//   padding: 30px;
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+//   a {
+//     font-weight: bold;
+//     color: #2c3e50;
 
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
+//     &.router-link-exact-active {
+//       color: #42b983;
+//     }
+//   }
+// }
 </style>

src/router/cinema/index.js

@@ -0,0 +1,4 @@
+export default{
+    path:'/cinema',
+    component:() => import('@/views/Cinema')
+}

src/router/index.js

@@ -1,29 +1,43 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-
+// import Home from '../views/Home.vue'
+import movieRouter from './movie'
+import mineRouter from './mine'
+import cinemaRouter from './cinema'
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+  // {
+  //   path: '/',
+  //   name: 'home',
+  //   component: Home
+  // },
+  // {
+  //   path: '/about',
+  //   name: 'about',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // },
+  // {
+  //   path: '/about',
+  //   name: 'about',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // }
 ]
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
-  routes
+  routes:[
+    movieRouter,
+    mineRouter,
+    cinemaRouter
+  ]
 })
 
 export default router

src/router/mine/index.js

@@ -0,0 +1,4 @@
+export default{
+    path:'/mine',
+    component:() => import('@/views/Mine')
+}

src/router/movie/index.js

@@ -0,0 +1,4 @@
+export default{
+    path:'/movie',
+    component:() => import('@/views/Movie')
+}

src/views/Cinema/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>你好：Cinema </div>
+</template>
+
+<script>
+export default {
+
+
+}
+</script>
+
+<style lang='stylus' scoped>
+
+</style>

src/views/Mine/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>你好：Mine </div>
+</template>
+
+<script>
+export default {
+
+
+}
+</script>
+
+<style lang='stylus' scoped>
+
+</style>

src/views/Movie/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>你好：Movie </div>
+</template>
+
+<script>
+export default {
+
+
+}
+</script>
+
+<style lang='stylus' scoped>
+
+</style>