一: VueRouter

1. 配置项

在 VueRouter 中的index.js中

const router = new VueRouter({
  //mode默认值hash,区别在于切换页面的路径
  mode: 'history',
  base: process.env.BASE_URL,
  // 具体路由的配置
  routes
})

const routes = [
  {
    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')
  }
]

2. 具体路由的切换

通过router-link 中的 to 里面的路径，以便于修改当前的一个路由地址，达到切换组件的效果

router-view 表示切换后的组件要显示在哪

<template>
  <div id="app">
    <nav>
      <!-- 除了可以用to还可以使用:to"{'name'}" 绑定的方式--> 
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link :to="{ name:'about'}">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

3. 自定义组件注册路由

首先在 view 下创建一个组件 VideoView.vue

<template>
  <H1>视频信息</H1>
</template>

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

<style>

</style>

import 组件 , 在 routes 里面注册路由
最后在 App.vue 里添加对应的router-link

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import VideoView from '../views/VideoView.vue'

Vue.use(VueRouter)

const routes = [
  {
    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')
  },
  {
    path: '/video',
    name: 'video',
    component: VideoView
  }
]

4. 动态路由

如果想要匹配到 video 下的任何视频，就需要动态路由

在 routes 中加入 props

  {
    path: '/video/:id',
    name: 'video',
    component: VideoView,
    props: true
  }

然后在对应的组件中也加入 props

<template>
  <div class="video">
    <h1>视频信息</h1>
    <p>视频id:{{ id }}</p>
  </div>
</template>

<script>
export default {
  name: 'VideoView',
  props: ['id']
}
</script>

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <!-- 通过 params 增加参数 -->
      <router-link :to="{ name:'video',params: { id: 29 }}">Video</router-link>


    </nav>
    <router-view/>
  </div>
</template>

5. 嵌套路由

比如说对应某个视频有一下子功能，比如说：点赞，投币，收藏，弹幕，评论

通过children 创建子功能

import VideoInfo1 from '../views/video/VideoInfo1.vue'
import VideoInfo2 from '../views/video/VideoInfo2.vue'


  {
    path: '/video/:id',
    name: 'video',
    component: VideoView,
    children: [
      { path: 'info1', name: 'video-info1', component: VideoInfo1 },
      { path: 'info2', name: 'video-info2', component: VideoInfo2 }

    ],
    props: true
  }

定义二级组件的功能

<template>
  <div class="video-info">
    <h3>二级组件,点赞情况</h3>
  </div>
</template>

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

<style>

</style>

访问的路径为 :

localhost:8080/video/29/info2

localhost:8080/video/29/info1

6. 编程式导航

用户不需要点击跳转，通过$router.push自动跳转

export default {
  name: 'VideoInfo1',
  // 三秒后自动跳转到home
  created () {
    setTimeout(() => {
      this.$router.push({ name: 'home' })
    }, 3000)
  }
}

还有$router.replace 等方法

7. 导航守卫

比如说要在某个页面或者所有页面增加一个进度条

// 在router中index.js定义
router.beforeEach((to, from, next) => {
  console.log('路由触发')
  next()
})

前置守卫可以用来判断检测用户是或否登录再判断是否能点击

二: Vuex

统一的数据存储方式

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

1. state 的使用

将数据存入 state

export default new Vuex.Store({
  // 存数据在全局,其他组件都可以访问
  state () {
    return {
      loginStatus: '用户已登录'
    }
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

取出数据

<script>
export default {
  name: 'VideoInfo1',
  created () {
    console.log(this.$store.state.loginStatus)
  }
}
</script>

2. mutations 的使用

mutations 相当于 methods，可以全局的对某个数据修改

不建议在组件里对某个数据进行修改 , 不利于数据的维护

定义函数

export default new Vuex.Store({
  // 存数据在全局,其他组件都可以访问
  state () {
    return {
      loginStatus: '用户已登录',
      count: 0
    }
  },
  getters: {
  },
  mutations: {
    changeCount (state, num) {
      state.count += num
      console.log('count + ', num, '结果为:', state.count)
    }
  },
  actions: {
  },
  modules: {
  }
})

在其他组件中之心执行

mutations 中定义的方法必须通过commit 的方式提交

<script>
export default {
  name: 'VideoInfo1',
  created () {
    console.log(this.$store.state.loginStatus)
    this.handler()
  },
  methods: {
    handler () {
      this.$store.commit('changeCount', 1)
      this.$store.commit('changeCount', 1)
    }
  }
}
</script>

3. actions 的使用

异步

在 actions 中定义一个函数

export default new Vuex.Store({
  // 存数据在全局,其他组件都可以访问
  state () {
    return {
      loginStatus: '用户已登录',
      count: 0
    }
  },
  getters: {
  },
  mutations: {
    changeCount (state, num) {
      state.count += num
      console.log('count + ', num, '结果为:', state.count)
    }
  },
  actions: {
    delayCahngeCount (store, num) {
      setTimeout(() => {
        store.commit('changeCount', num)
      }, 3000)
    }
  },
  modules: {
  }
})

在组件中执行this.$store.dispatch

<script>
export default {
  name: 'VideoInfo1',
  created () {
    console.log(this.$store.state.loginStatus)
    this.handler()
  },
  methods: {
    handler () {
      this.$store.commit('changeCount', 1)
      this.$store.dispatch('delayChangeCount', 10)
      this.$store.commit('changeCount', 1)
    }
  }
}
</script>

和 actions 同步执行不同的是 mutations 定义的函数在执行的时候，是先等同步的函数执行完之后再执行异步函数

4. getters 的使用

相当于计算属性，具有缓存性

定义len(state) 获取 loginStatus 的长度

|export default new Vuex.Store({
  // 存数据在全局,其他组件都可以访问
  state () {
    return {
      loginStatus: '用户已登录',
      count: 0
    }
  },
  getters: {
    len (state) {
      console.log('len()执行了')
      return state.loginStatus.length
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

通过this.$store.getters.len

<script>
export default {
  name: 'VideoInfo1',
  created () {
    console.log(this.$store.state.loginStatus)
    this.handler()
  },
  methods: {
    handler () {
 console.log(this.$store.getters.len)
      console.log(this.$store.getters.len)
      console.log(this.$store.getters.len)
      console.log(this.$store.getters.len)
      console.log(this.$store.getters.len)
    }
  }
}
</script>

5. modules

不同的功能需要有不同的全局处理，就可以使用 modules 分模块

  modules: {
    a: {
      state,
      mutations
      ...
    },
    b: {
      ...
    }
  }

目录CONTENT

VueRouter 和 Vuex