new

project/src/App.vue

@@ -3,9 +3,33 @@
     <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> -->
+
+      <!-- 
+        query传参  在地址里面拼接 数据不会丢失
+        可以通过path 跳转  也可以通过name跳转
+        params传参 页面刷新的时候 数据丢失
+        url传参  在router里面定义id接收 然后 在course里面通过params接收参数
+
+      -->
+      <router-link :to="{path:'/course',query:{id: 999,name:'zs'}}">Course</router-link>
+      <!-- 
+        :to = {
+          path: '/course',
+          query: {
+            id: 999,
+            name: 'zs
+          }
+        }
+      -->
+      <!-- <router-link :to="{ name: 'Course', query: { id: 888, name: 'lisi' } }"
+        >Course</router-link
+      > -->
+
+      <!-- <router-link :to="{name: 'Course',params: {name:'zs',id:777}}">Course</router-link> -->
+      <!-- <router-link to="/course/5">Course</router-link> -->
     </nav>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 

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 Fe from "../views/Fe.vue"
+import Rd from "../views/Rd.vue"
 
 Vue.use(VueRouter)
 
@@ -19,9 +21,19 @@ const routes = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
   },{
+    // path: '/course/:id',
     path: '/course',
     name: 'Course',
-    component: Course
+    component: Course,
+    children: [{
+      path: 'fe',
+      name: 'Fe',
+      component: Fe
+    },{
+      path: 'rd',
+      name: 'Rd',
+      component: Rd
+    }]
   }
 ]
 

project/src/views/Course.vue

@@ -1,6 +1,17 @@
 <template>
   <div>
     <h1>我是Course页面</h1>
+    <!-- <h2>id: {{ $route.query.id }} </h2>
+    <h2>name: {{ $route.query.name }}</h2> -->
+
+    <!-- <h2>id: {{ $route.params.id }} </h2>
+    <h2>name: {{ $route.params.name }}</h2> -->
+
+    <h2>url传递的id: {{ $route.params.id }}</h2>
+
+    <router-link to="/course/fe">Fe</router-link> |
+    <router-link to="/course/rd">Rd</router-link>
+    <router-view/>
   </div>
 </template>
 

project/src/views/Fe.vue

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

project/src/views/Rd.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>我是Rd</h1>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>