vue2

8.vue/高阶/my-project/src/App.vue

@@ -1,32 +1,60 @@
 <template>
   <div>
-    主页
     <!-- 3.使用组件 -->
-    <Demo1></Demo1>
+    <!-- <Demo1></Demo1>
     <Demo2></Demo2>
     <p ref="aaa">你好</p>
-    <button @click="getMain">获取</button>
+    <button @click="getMain">获取</button>-->
+    <!-- 声明式导航 -->
+    <div id="nav">
+      <router-link active-class="active" to="/home">首页</router-link>
+      <router-link active-class="active" to="/list">列表</router-link>
+      <router-link active-class="active" to="/my">我的</router-link>
+    </div>
+    <!-- 占位符 -->
+    <div id="main">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
 <script>
 // 1.引入组件
-import Demo1 from './components/Demo1.vue';
-import Demo2 from './components/Demo2.vue';
+import Demo1 from "./components/Demo1.vue";
+import Demo2 from "./components/Demo2.vue";
 export default {
   // 2.注册组件
-  components:{
+  components: {
     Demo1,
     Demo2
   },
-  methods:{
+  methods: {
     getMain() {
-      console.log(this.$refs.aaa)
+      console.log(this.$refs.aaa);
     }
   }
-}
+};
 </script>
 
-<style>
-
+<style scoped lang="scss">
+#nav {
+  width: 90vw;
+  display: flex;
+  justify-content: space-around;
+  a {
+    font-size: 32px;
+    text-decoration: none;
+    color: #000;
+    font-weight: bold;
+  }
+}
+  #main {
+    width: 90vw;
+    height: 50vh;
+    border: 1px solid skyblue;
+    margin: 10px auto;
+  }
+  .active {
+    color: aquamarine !important;
+  }
 </style>

8.vue/高阶/my-project/src/components/Demo2.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="demo">
-    <h1>这是第二个案例</h1>
+    <h1>女装</h1>
     <ul>
       <li>
         <a href>1</a>

8.vue/高阶/my-project/src/router/index.js

@@ -9,12 +9,52 @@ Vue.use(VueRouter);
 import Home from '../views/Home.vue';
 import My from '../views/My.vue';
 import List from '../views/List.vue';
+import Demo1 from '@/components/Demo1.vue';
+import Demo2 from '@/components/Demo2.vue';
 
-const routes = []
+// 2.路由路径
+const routes = [
+    // 路由重定向
+    {
+        path:'/',
+        redirect: '/home'
+    },
+    {
+        // 路径
+        path:"/home",
+        // 组件页面
+        component: Home
+    },
+    {
+        path:'/my',
+        component: My
+    },
+    {
+        path:'/list',
+        component: List,
+        children:[
+            {
+                path:'',
+                redirect:'demo1'
+            },
+            {
+                path:'demo1',
+                component:Demo1
+            },
+            {
+                path:'demo2',
+                component:Demo2
+            }
+        ]
+    }
+]
 
 const router = new VueRouter({
+    // 模式
     mode:'history',
+    // 代理路径
     baseURL: process.env.BASE_URL,
+    // 路由路径
     routes
 })
 

8.vue/高阶/my-project/src/views/List.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="List">
-      列表
+      <h1>列表</h1>
+      <router-link  active-class="active" to="/list/demo1">男装</router-link>
+      <router-link  active-class="active" to="/list/demo2">女装</router-link>
+      <router-view></router-view>
     </div>
   </template>
   
@@ -10,6 +13,8 @@
   }
   </script>
   
-  <style>
-  
+  <style scoped lang="scss">
+    .active {
+      color: yellowgreen;
+    }
   </style>