new

project/src/App.vue

@@ -4,10 +4,21 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</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="{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="/course/5">Course</router-link> -->
+      <!-- <router-link :to="{name:'Course',params:{name:'zs',age:18}}">Course</router-link> -->
     </nav>
     <router-view/>
   </div>
+  <!-- 
+    query 传参 在地址里  数据不会丢失
+    可以通过path  也可以通过name
+    params 传参   页面刷新的时候 数据会丢失
+    url传参  在地址里
+
+  -->
 </template>
 
 <style>

project/src/views/Course.vue

@@ -4,6 +4,12 @@
     <h1>id: {{$route.query.id}}</h1>
     <h1>姓名: {{$route.query.name}}</h1>
 
+
+    <h2>parmas传参</h2>
+    <h1>姓名:{{$route.params.name }}</h1>
+    <h1>年龄:{{$route.params.age }}</h1>
+
+    <h1>url传递的id: {{$route.params.id}}</h1>
     <!-- 
       在组件内 有一个$route属性 表示当前的组件的路由信息
       $route.query   通过query传递过来的参数  都可以在这个对象下面找到