vue2

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

@@ -33,7 +33,7 @@ const routes = [
         component: List,
         children:[
             {
-                path:'detail',
+                path:'detail/:xxx',
                 // 路由懒加载
                 component: () => import("../views/Detail.vue")
             }
@@ -46,7 +46,9 @@ const router = new VueRouter({
     // 模式 history/hash
     mode:'hash',
     base:process.env.BASE_URL,
-    routes
+    routes,
+    // 全局配置高亮类
+    linkActiveClass:"active"
 })
 // 抛出路由表
 export default router;

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

@@ -1,14 +1,28 @@
 <template>
   <div class="detail">
     <h2>
-      详情
+      详情:{{ msg }}
     </h2>
   </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      msg:""
+    }
+  },
+  created() {
+    // console.log(this.$route)
+    this.msg = this.$route.params.xxx
+  },
+  watch:{
+    $route(to) {
+      console.log(to)
+       this.msg = to.params.xxx
+    }
+  }
 }
 </script>
 

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

@@ -2,7 +2,7 @@
   <div class="list">
     <ul>
       <li v-for="(item,index) in list" :key="index">
-        <router-link to="/list/detail">{{ item.title }}</router-link>
+        <router-link  :to="`/list/detail/${item.desc}`">{{ item.title }}</router-link>
       </li>
     </ul>
     <div class="main">