vue

vue2.0/vue高阶/4.归纳.md

@@ -13,4 +13,37 @@
         path:"/路径",
         component: 引入页面路径的名称
     }
-  ```
+  ```
+3. App.vue
+```
+    跳转标签：
+    router-link
+    属性：
+        to:跳转路径地址
+        active-class="active" 添加选中样式
+    占位标签：
+    router-view 
+```
+4. 多级路由 
+* router.js
+    1. 引入路径
+    2. 在children属性中添加路由
+    3. path路径不要加：/
+
+* router-link 
+   + to的路径完整的路径
+
+5. 路由的重定向
+```
+  {
+    path:'/',
+    redirect: '/list'
+  }
+```
+
+6. 路由命名
+* router.js 
+ + name:"xxx"
+```
+     <router-link active-class="active" :to="{name:'xxx'}"></router-link>
+```

vue2.0/vue高阶/project1.0/src/App.vue

@@ -1,13 +1,25 @@
 <template>
   <div id="app">
     <h2>路由</h2>
-      <!-- 跳转路由标签 => a标签 -->
-      <h3>跳转标签</h3>
-      <router-link to="/home">去首页</router-link>
-      <!-- 占位显示 -->
-      <h3>显示位置</h3>
+    <!-- 跳转路由标签 => a标签 -->
+    <h3>跳转标签</h3>
+    <div class="nav">
+      <!-- <router-link active-class="active" to="/home"
+        >去首页</router-link
+      > -->
+      <router-link active-class="active" :to="{name:'home'}"
+        >去首页</router-link
+      >
+      <router-link active-class="active" to="/list"
+        >去列表</router-link
+      >
+    </div>
+    <!-- 占位显示 -->
+    <h3>显示位置</h3>
+    <div class="main">
       <router-view></router-view>
-    <hr>
+    </div>
+    <hr />
     <h2>Vuex</h2>
     <!-- 
       State:
@@ -18,16 +30,16 @@
     <p>1.名字{{ name1 }},来自{{ address1 }}</p>
     <p>2.名字{{ $store.state.name }},来自{{ $store.state.address }}</p>
     <p>3.名字{{ name }},来自{{ address }}</p>
-    <hr>
+    <hr />
     <!-- 
       Getters
         1.this.$store.getters.xxx 在生命周期，或者适当的方法中
         2.$store.getters.xxx 在template模板中
         3.引入mapGetters 在computed中 ...mapGetters(['xxx']
      -->
-    <p>1.数值：{{count1}}</p>
-    <p>2.数值：{{$store.getters.newCount}}</p>
-    <p>2.数值：{{newCount}}</p>
+    <p>1.数值：{{ count1 }}</p>
+    <p>2.数值：{{ $store.getters.newCount }}</p>
+    <p>2.数值：{{ newCount }}</p>
     <hr />
     <!-- 
       Mutations 同步
@@ -50,7 +62,7 @@
           使用：this.xxx()
      -->
     <button @click="add">添加</button>
-    <br><br>
+    <br /><br />
     <button @click="reduce">递减</button>
     <h2>组件库</h2>
     <el-button type="primary">主要按钮</el-button>
@@ -90,9 +102,9 @@ export default {
     this.address1 = this.$store.state.address;
     this.count1 = this.$store.getters.newCount;
   },
-  computed:{
-    ...mapState(['name','address']),
-    ...mapGetters(['newCount'])
+  computed: {
+    ...mapState(["name", "address"]),
+    ...mapGetters(["newCount"]),
   },
   methods: {
     init() {
@@ -117,24 +129,24 @@ export default {
         });
     },
     add() {
-      this.$store.commit("addCount",10);
+      this.$store.commit("addCount", 10);
     },
     // 同步
     // ...mapMutations(['reduceCount']),
     // 异步
-    ...mapActions(['asyncReduce']),
+    ...mapActions(["asyncReduce"]),
     reduce() {
       // 同步
       // this.reduceCount();
       // this.$store.commit("reduceCount");
       // 异步
-      this.$store.dispatch("asyncReduce")
+      this.$store.dispatch("asyncReduce");
       // this.asyncReduce()
-    }
+    },
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .el-carousel__item h3 {
   color: #475669;
   font-size: 18px;
@@ -150,4 +162,22 @@ export default {
 .el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce6;
 }
+.active {
+  color: red;
+  padding: 20px;
+  border: 1px solid #000;
+}
+.nav {
+  width: 500px;
+  height: 100px;
+  border: 1px solid plum;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.main {
+  width: 800px;
+  height: 800px;
+  border: 1px solid yellowgreen;
+}
 </style>

vue2.0/vue高阶/project1.0/src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

vue2.0/vue高阶/project1.0/src/components/demo1.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo1">
+    我是案例一
+    <ul>
+        <li>消息一</li>
+        <li>消息二</li>
+        <li>消息三</li>
+        <li>消息四</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+    .demo1 {
+        font-size: 24px;
+        color: yellowgreen;
+    }
+    ul li {
+        color: purple;
+    }
+</style>

vue2.0/vue高阶/project1.0/src/components/demo2.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="demo1">
+    我是案例二
+    <el-image :src="src"></el-image>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
+      }
+    }
+}
+</script>
+
+<style>
+    .demo2 {
+        font-size: 24px;
+        color: skyblue;
+    }
+</style>

vue2.0/vue高阶/project1.0/src/router/index.js

@@ -4,38 +4,41 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 // 1.把页面路径引入
 import Home from '../views/Home.vue';
+import List from '../views/List.vue';
+import Demo1 from '../components/demo1.vue';
+import Demo2 from '../components/demo2.vue';
 // 挂载vue实例
 Vue.use(VueRouter)
 // 自定义路由
 const routes = [
+  {
+    path:'/',
+    redirect: '/list'
+  },
   {
     // path 路径
     path:'/home',
+    name:"home",
     // component 组件
     component: Home
-  }
-
-
-
-
-
-
-
-
+  },
+  {
+    // path 路径
+    path:'/list',
+    // component 组件
+    component: List,
+    children:[
+      {
+        path:'demo1', // 不要写: "/"
+        component: Demo1
+      },
+      {
+        path:'demo2',
+        component: Demo2
+      }
+    ]
+  },
 
-  // {
-  //   path: '/',
-  //   name: 'home',
-  //   component: HomeView
-  // },
-  // {
-  //   path: '/about',
-  //   name: 'about',
-  //   // route level code-splitting
-  //   // this generates a separate chunk (about.[hash].js) for this route
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  // }
 ]
 
 // 挂载到vue-router

vue2.0/vue高阶/project1.0/src/views/List.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="list">
     这是列表页
+    <div class="list-nav">
+        <router-link class="tabs" to="/list/demo1">demo1</router-link>
+        <router-link class="tabs" to="/list/demo2">demo2</router-link>
+    </div>
+    <router-view></router-view>
   </div>
 </template>
 
@@ -10,6 +15,23 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+    .list-nav {
+        width: 100%;
+        height: 60px;
+        border: 1px solid #f00;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+    .list-nav .tabs {
+        width: 70px;
+        height: 35px;
+        background: #ff0;
+        color: #f00;
+    }
+    .active {
+        background: #fff;
+        color: #00f;
+    }
 </style>