vue

vue/vue高阶/project/src/App.vue

@@ -7,10 +7,60 @@
       active-class 定义点击后的样式
       一定要搭配占位标签使用
     -->
+    <!-- 
+      路由的记录模式
+        有历史记录 push
+        无历史记录 replace
+     -->
+     <!-- 
+      传参：
+        1.query传参
+          第一种：router-link上
+                  动态绑定to属性
+                  传参写在反引号(``)中
+                  ？拼接传参
+                  & 连接多个传参
+          第二种：router-link上
+                  动态绑定to属性 
+                  传参写在对象中
+                  路径：path/name
+                  参数：query对象中
+      -->
     <div class="header">
-    <router-link active-class="active" class="text" to="/home">首页</router-link>
-    <router-link active-class="active" class="text" to="/list1">列表</router-link>
-    <router-link active-class="active" class="text" to="/my">我的</router-link>
+      <router-link active-class="active" class="text" :to="{
+        name:'jia',
+        query:{
+          id:777,
+          title:'你好'
+        }
+      }">首页</router-link>
+    <!-- <router-link active-class="active" class="text" :to="`/home?id=6666&title=你好`">首页</router-link> -->
+    <!-- <router-link replace active-class="active" class="text" :to="{path:'/home'}">首页</router-link> -->
+    <!-- <router-link replace active-class="active" class="text" :to="{name:'jia'}">首页</router-link> -->
+
+    <!--
+      2.params传参
+          先在路由中配置传参格式
+         1.字符串
+          动态绑定to 参数写在反引号中 
+          参数直接拼接即可
+        2.对象
+          动态绑定to属性 
+          传参写在对象中
+          路径：只能用name
+          参数：params对象中
+
+      -->
+
+      <router-link replace active-class="active" class="text" :to="{
+        name:'liebiao',
+        params:{
+          id:555,
+          hobby:'画画'
+        }
+      }">列表</router-link>
+    <!-- <router-link replace active-class="active" class="text" :to="`/list/999/画画`">列表</router-link> -->
+    <router-link replace active-class="active" class="text" to="/my">我的</router-link>
     </div>
     <!-- 占位标签 -->
     <div class="main">

vue/vue高阶/project/src/router/index.js

@@ -22,7 +22,7 @@ const routes = [
   {
     path:'/',
     // 重定向
-    redirect: '/home'
+    // redirect: '/home'
   },
   // 2.配置路由
   { 
@@ -30,7 +30,9 @@ const routes = [
     path:'/home',
     // 路由路径可以走哪个真实路径
     component: Home,
-    redirect: '/home/part1',
+    // redirect: '/home/part1',
+    // 命名路由
+    name: 'jia',
     // 配置子集路由
     children:[
       // 子集路径配置不要: /
@@ -45,7 +47,8 @@ const routes = [
     ]
   },
   { 
-    path:'/list',
+    path:'/list/:id/:hobby',
+    name:'liebiao',
     component: List
   },
   { 

vue/vue高阶/project/src/views/Home.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home">
+    {{ $route.query.id }}
     <div class="nav">
         <router-link active-class="ha" to="/home/part1" class="hobby">画画</router-link>
         <router-link active-class="ha" to="/home/part2" class="hobby">舞蹈</router-link>
@@ -12,7 +13,12 @@
 
 <script>
 export default {
+    created() {
+        // 接收query传参
+        //$route 路由参数
+        console.log(this.$route.query)
 
+    },
 }
 </script>
 

vue/vue高阶/project/src/views/List.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="list">
     列表
+    <h1>{{ $route.params.hobby }}</h1>
   </div>
 </template>
 
 <script>
 export default {
-
+  created() {
+    console.log(this.$route.params.id)
+  },
 }
 </script>