new

project/src/App.vue

@@ -3,9 +3,9 @@
     <nav>
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link> |
-      <!-- <router-link to="/course">Course</router-link> -->
+      <router-link to="/course">Course</router-link>
       <!-- <router-link :to="{path:'./course',query:{id:999,name:'zs'}}">Course</router-link> -->
-      <router-link :to="{name:'Course',query:{id:888,name:'lisi'}}">Course</router-link>
+      <!-- <router-link :to="{name:'Course',query:{id:888,name:'lisi'}}">Course</router-link> -->
 
       <!-- <router-link to="/course/5">Course</router-link> -->
       <!-- <router-link :to="{name:'Course',params:{name:'zs',age:18}}">Course</router-link> -->

project/src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import Course from '../views/Course.vue'
+import Rd from '../views/Rd.vue'
+import Fe from '../views/Fe.vue'
 
 Vue.use(VueRouter)
 
@@ -21,7 +23,18 @@ const routes = [
   },{
     path: '/course',
     name: 'Course',
-    component: Course
+    component: Course,
+    // redirect: '/aa',
+    // alias: '/aa',
+    children:[{
+      path: 'fe',
+      name: 'Fe',
+      component: Fe
+    },{
+      path: 'rd',
+      name: 'Rd',
+      component: Rd
+    }]
   }
 ]
 

project/src/views/Course.vue

@@ -18,6 +18,12 @@
         name: 'zs'
       }
     -->
+
+    <router-link to="/course/fe">Fe</router-link> |
+    <router-link to="/course/rd">Rd</router-link>
+    <router-view></router-view>
+
+
   </div>
 </template>
 

project/src/views/Fe.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    我是Fe
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

project/src/views/Rd.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h1>我是RD</h1>
+    <br />
+    <h2>count: {{ number }}</h2>
+    <button @click="add()">+1</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      number: 0,
+    };
+  },
+  methods: {
+    add() {
+      this.number++;
+    },
+  },
+};
+</script>
+
+<style>
+</style>