vue技术栈实战开发（课程笔记)

---

2018-11-12更新

Router（一）

• router-link和router-view组件

• 路由配置

  • 动态路由

  {
      path:"/argu/:name",
      component:()=> import("@views/argu.vue")
  }
  

  • 嵌套路由

  {
      path: "/parent",
      name: parent,
      component: () => import("@/views/home.vue"),
      children:[
          {
              path:"child",
              component:() => import("@views/child.vue")
          }
      ]
  }
  

  • 命名路由

     <router-link :to="{name: "home"}">Home</router-link>
     
     {
         path: "/home",
         name: home,
         component: () => import("@/views/home.vue")
     }
  

  • 命名视图

     <router-view/>
     <router-view name="email"></router-view>
     
     {
         path:"/named_view",
         components:{
             default:() => import("@/views/child.vue"),
             email:()=> impotr("@/views/email.vue")
         }
     }
  

• js操作路由

  const name = 'gyh'
  this.router.push({
    path: `/argu/${name}` 
  })
  

• 重定向（redirect）和别名（alias）

Router（二）

• 编程式的导航

方式1：
直接修改地址栏

方式2：
this.$router.push(‘路由地址’);
this.$router.replace(‘路由地址’);
this.$router.go(int);

还可以这样用：
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
在路由到的页面中使用this.$route.params接受，即this.$route.params.userId

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
在路由到的页面中使用this.$route.query接受，即this.$route.query.plan

其中，使用params的时候，必须要用name传路由名称而非path。

方式3：
<router-link to="路由地址" replace></router-link>
使用replace不会留下History记录，不能用后退键返回上一个页面

Router（三）

• 路由组件传参

  页面需要写的内容是一样的，区别主要在于路由配置

  • 动态匹配页面（布尔模式）

    {
            path: 'params/:id',
            name: 'params',
            meta: {
              title: '参数'
            },
            component: () => import('@/views/argu.vue'),
            props: true
    }
    

    <template>
      <div>
        {{ id }}
      </div>
    </template>
    
    <script>
    export default {
      props: {
        id: {
          type: String,
          default: 'lison'
        }
      }
    }
    </script>
    
    

  • 普通页面（对象模式）

    {
            path: 'params/:id',
            name: 'params',
            meta: {
              title: '参数'
            },
            component: () => import('@/views/argu.vue'),
            props: {
                food:'banana'
            }
    }
    

    <template>
      <div>
        {{ food }}
      </div>
    </template>
    
    <script>
    export default {
      props: {
        food: {
          type: String,
          default: 'apple'
        }
      }
    }
    </script>
    

  • 函数模式

    {
            path: 'params/:id',
            name: 'params',
            meta: {
              title: '参数'
            },
            component: () => import('@/views/argu.vue'),
            props: router => ({
                food:route.query.food
            })
    }
    

    <template>
      <div>
        {{ food }}
      </div>
    </template>
    
    <script>
    export default {
      props: {
        food: {
          type: String,
          default: 'apple'
        }
      }
    }
    </script>
    

• HTML5 History模式

  mode:'history'
  

• 路由导航

  /**
   * 1. 导航被触发
   * 2. 在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave
   * 3. 调用全局的前置守卫 beforeEach
   * 4. 在重用的组件里调用 beforeRouteUpdate
   * 5. 调用路由独享的守卫 beforeEnter
   * 6. 解析异步路由组件
   * 7. 在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter
   * 8. 调用全局的解析守卫 beforeResolve
   * 9. 导航被确认
   * 10. 调用全局的后置守卫 afterEach
   * 11. 触发DOM更新
   * 12. 用创建好的实例调用beforeRouterEnter守卫里传给next的回调函数
   */
  

  router.beforeEach((to,from,next)=>{
      
  })
  

• 路由元信息（meta）

  meat:{
      title: '首页'
  }
  

• 过渡效果

  <transition-group :name="routerTransition">
      <router-view key="default"/>
      <router-view key="email" name="email"/>
      <router-view key="tel" name="tel"/>
  </transition-group>
  

   data () {
      return {
        routerTransition: ''
      }
    },
    watch: {
      '$route' (to) {
        to.query && to.query.transitionName && this.routerTransition = to.query.transitonName
      }
    },
  

  .router-enter{
    opacity: 0;
  }
  .router-enter-active{
    transition: opacity 1s ease;
  }
  .router-enter-to{
    opacity: 1;
  }
  .router-leave{
    opacity: 1;
  }
  .router-leave-active{
    transition: opacity 1s ease;
  }
  .router-leave-to{
    opacity: 0;
  }
  

状态管理

1、BUS

2、Vuex-基础-state&getter

3、Vuex-基础-mutation&action&moodule

4、Vuex-进阶（插件、严格模式、Vuex+双向绑定）

• action使用

  import { getAppName } from '@/api/app'
  
  const actions = {
    // updateAppName ({ commit }) {
    //   getAppName().then(res => {
    //     const { info: { appName } } = res
    //     commit('SET_APP_NAME', appName)
    //   }).catch(err => {
    //     console.log(err)
    //   })
    // }
    async updateAppName ({ commit }) {
      try {
        const { info: { appName } } = await getAppName()
        commit('SET_APP_NAME', appName)
      } catch (err) {
        console.log(err)
      }
    }
  }
  export default actions
  

  import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
  

   ...mapActions([
        'updateAppName'
  ]),
  

  this.updateAppName()
  

• 动态注册模块（this.$store.registerModule）

• 插件（持久化存储的案例）

  plugins: [ saveInLocal ]
  

    export default store => {
      if (localStorage.state) store.replaceState(JSON.parse(localStorage.state))
      store.subscribe((mutation, state) => {
        localStorage.state = JSON.stringify(state)
      })
    }
    //replaceState vuex提供的替换state方法
    //subscribe vuex提供的订阅store的mutation，handler会在每个mutation完成后调用，接收 mutation和经过mutation后的状态作为参数
  

• 严格模式

  strict: process.env.NODE_ENV === 'development'
  

• 双向绑定

  stateValue: {
        get () {
          return this.$store.state.stateValue
        },
        set (val) {
          this.SET_STATE_VALUE(val)
        }
  },
  

Ajax请求

• 解决跨域问题

  • 前端解决

    //vue.config.js
    devServe{
        proxy: 'http://localhost:4000'
    }
    

  • 后端解决

• 封装axios

  • 请求拦截
  • 响应拦截

• 请求实战