vue复习5

路由导航

为什么要使用路由导航呢？

router.beforeEach((to,from,next) => {
  document.title = to.matched[0].meta.title
  next()
})

这里的to是一个route，是即将要到达的路由，数据必须定义在routes里的meta里 ，next（）函数必须调用

钩子 === 回调

后置导航守卫不需要 next（） ，在路由跳转后调用

keep-alive 遇见vue-router

tabbar

在style中引用css文件要加@

//这是最外诚的tabbar
<template>
    <tab-bar>
      <tab-bar-item path="/home" activeColor='pink'>
        <img slot="item-icon" src="../assets/img/tabbar/home.svg" alt="">
        <img slot="item-icon-active" src="../assets/img/tabbar/home_active.svg" alt="">
        <div slot="item-text">好</div>
      </tab-bar-item>
      <tab-bar-item path="/categ" activeColor='pink'>
        <img slot="item-icon" src="../assets/img/tabbar/home.svg" alt="">
        <img slot="item-icon-active" src="../assets/img/tabbar/home_active.svg" alt="">
        <div slot="item-text">好</div>
      </tab-bar-item> 
          <tab-bar-item path="/cart" activeColor='pink'>
        <img slot="item-icon" src="../assets/img/tabbar/home.svg" alt="">
        <img slot="item-icon-active" src="../assets/img/tabbar/home_active.svg" alt="">
        <div slot="item-text">好</div>
      </tab-bar-item>
          <tab-bar-item path="/profile" activeColor='pink'>
        <img slot="item-icon" src="../assets/img/tabbar/home.svg" alt="">
        <img slot="item-icon-active" src="../assets/img/tabbar/home_active.svg" alt="">
        <div slot="item-text">不好</div>
      </tab-bar-item>
    </tab-bar>
</template>

<script>

import TabBar from './tabbar/TabBar'
import TabBarItem from './tabbar/TabBarItem'

export default {
  name: 'maintabbar',
  components: {
  TabBar,
   TabBarItem
  }
}
</script>

<style>

</style>

<template>
  <div id="tab-bar">
     <slot></slot>
    </div>
</template>

<script>
export default {
  name: 'TabBar'
}
</script>

<style>
#tab-bar {
   display: flex;
   background-color: #ccc;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;

   box-shadow: 0 -1px 1px rgba(100, 100, 100, .7);
 }
 
</style>

<template>
  <div class="tab-bar-item" @click="change" >
    <div v-if="!isActive" ><slot name="item-icon"></slot></div>
    <div v-else><slot name="item-icon-active"> </slot></div>
    <div :style="activeStyle"><slot name="item-text"> </slot></div>
      </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: {
      path:String,
       activeColor: {
        type: String,
        default: 'red'
      }
  },
//   data() {
//     //   return {
//     //    isActive: true
//     //   }
//   },
  computed: {
      isActive() {
           return this.$route.path.indexOf(this.path) !== -1
      },
       activeStyle() {
        return this.isActive ? {color: this.activeColor} : {}
      }
    
  },
  methods: {
      change() {
          this.$router.push(this.path)
      }
  }
}
</script>

<style>
 .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-style: 14px;
  }
   .tab-bar-item img {
       width: 24px;
       height: 24px;
        margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
   }
 /* .active {
     font-size: 20px;
     color: red;
 } */
</style>

最后app里引用组件

<template>
  <div id="app">
  <main-tabbar></main-tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
import mainTabbar from "./components/maintabbar"

export default {
  name: 'App',
  components: {
    mainTabbar
  }
}
</script>

<style>
 @import "./assets/css/base.css";


</style>

起别名

vuex 的getter在什么时候使用

在数据需要进行处理的时候使用，类似于computed计算属性的使用
，getter还可以作为参数使用

  state: {
    counter: 0,
    students: [
      {id:1,name: 'huzhimin',age: 18},
      {id:2,name: 'huzhimin22222',age: 10},
      {id:3,name: 'huzhimin333333',age: 30},
      {id:4,name: 'huzhimi4444444',age: 40}

    ]
  },
  mutations: {
    inc(state) {
       state.counter++
    },
    dec(state) {
      state.counter--
    }
  },
  actions: {
  },
  getters: {
    power(state) {
      return state.counter * state.counter
    },
    selec(state) {
      return state.students.filter(s => s.age >= 20)
    },
    seleclen(state,getters) {
      return getters.selec.length
    },
    seleclenYou(state) {
      // return function (age) {
      //      return state.students.filter(s => s.age >= age) 
       return age => {
         return  state.students.filter(s => s.age >= age) 
       }
      // }
    }

  },