vue2

vue/高阶/project2/src/App.vue

@@ -2,10 +2,15 @@
   <div class="app">
     <h1>哈哈哈哈哈</h1>
     <div class="nav">
-      <router-link active-class="news" to="/home">首页</router-link>
-      <router-link active-class="news" to="/list">列表</router-link>
-      <router-link active-class="news" to="/shop">商品</router-link>
-      <router-link active-class="news" to="/my">我的</router-link>
+      <!-- replace -->
+      <router-link push active-class="news" to="/home">首页</router-link>
+      <router-link push active-class="news" to="/list">列表</router-link>
+      <router-link push
+        active-class="news"
+        :to="{ name: 'shangpin', query: { names: '图图', id: 433 } }"
+        >商品</router-link
+      >
+      <router-link push active-class="news" to="/my">我的</router-link>
     </div>
     <router-view></router-view>
   </div>

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

@@ -22,6 +22,7 @@ const routes = [
     },
     {
         path:'/shop',
+        name:"shangpin",
         component: Shop
     },
     {
@@ -33,7 +34,10 @@ const routes = [
         component: List,
         children:[
             {
+                // path:'detail',
                 path:'detail/:xxx',
+                name:'xiangqing',
+                props: true,
                 // 路由懒加载
                 component: () => import("../views/Detail.vue")
             }
@@ -51,4 +55,18 @@ const router = new VueRouter({
     linkActiveClass:"active"
 })
 // 抛出路由表
-export default router;
+export default router;
+
+
+/**
+ * parmas传参
+ * 1.参数放在路径后面
+ * 2.去路由里面动态的生命参数
+ * 3.获取:this.$route.params.xxx
+ * 4.刷新数据丢失
+ * query传参
+ * 1.参数放在路径?后面
+ * 2.无需去路由里面动态的生命参数
+ * 3.获取:this.$route.query.xxx
+ * 4.刷新数据不丢失
+ */

vue/高阶/project2/src/views/Detail.vue

@@ -13,9 +13,12 @@ export default {
       msg:""
     }
   },
+  props:['xxx'],
   created() {
-    // console.log(this.$route)
-    this.msg = this.$route.params.xxx
+    console.log(this.xxx)
+    this.msg = this.xxx;
+    // console.log(this.$route) 
+    // this.msg = this.$route.query.xxx
   },
   watch:{
     $route(to) {

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

@@ -2,7 +2,25 @@
   <div class="list">
     <ul>
       <li v-for="(item,index) in list" :key="index">
+        <!-- params -->
         <router-link  :to="`/list/detail/${item.desc}`">{{ item.title }}</router-link>
+
+        <!-- <router-link  :to="{
+          name:'xiangqing',
+          params:{
+            xxx:item.desc
+          }
+        }">{{ item.title }}</router-link> -->
+
+        <!-- query -->
+        <!-- <router-link  :to="`/list/detail?xxx=${item.desc}&yyy=${item.title}`">{{ item.title }}</router-link> -->
+        <!-- <router-link  :to="{
+         path:'/list/detail',
+          query:{
+            xxx:item.desc,
+            yyy:item.title
+          }
+        }">{{ item.title }}</router-link> -->
       </li>
     </ul>
     <div class="main">

vue/高阶/project2/src/views/Shop.vue

@@ -1,10 +1,28 @@
 <template>
-  <div class="shop">商场</div>
+  <div class="shop">商场
+      <button @click="goHome">去首页</button>
+  </div>
+
 </template>
 
 <script>
 export default {
-
+  created() {
+    console.log(this.$route)
+  },
+  methods:{
+    goHome(){
+      // this.$router.push({
+      //   path:"/home",
+      //   query:{
+      //     aa:1
+      //   }
+      // })
+      // this.$router.go(-2)
+      // this.$router.forward()
+      // this.$router.back()
+    }
+  }
 }
 </script>