一篇学会Router&Vuex&

Router

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import VideoView from '../views/VideoView.vue'
import VideoInfo1 from '../views/video/VideoInfo1.vue'
import VideoInfo2 from '../views/video/VideoInfo2.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/:id',
    name: 'video',
    component: VideoView,
    children: [{
      path: 'info1',
      name: 'vedio-info1',
      component: VideoInfo1
    },
    {
      path: 'info2',
      name: 'vedio-info2',
      component: VideoInfo2
    }
    ],
    props: true
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  console.log('路由触发了')
  next()
})

export default router

<template>
    <div class="video-info1">
    <h3>二级组件：点赞情况分析111</h3>
    </div>
</template>
<script>
export default {
  name: 'VideoInfo1',
  created () {
    setTimeout(() => {
      this.$router.push({ name: 'vedio-info2', query: { someData: '我是info1的数据' } })
    }, 2000)
  }
}

</script>
<style>

</style>

<template>
    <div class="video-info2">
    <h3>二级组件：互动情况分析222</h3>
    </div>
</template>
<script>
export default {
  name: 'VideoInfo2',
  created () {
    console.log(this.$route.query.someData)
  }
}

</script>
<style>

</style>

Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state () {
    // 用于存储用户信息
    return {
      loginStatus: '用户已经登录',
      count: 0
    }
  },
  getters: {
    // 用于获取用户信息
    len (state) {
      console.log('getters执行了')
      return state.loginStatus.length
    }
  },
  mutations: {
    // 用于修改用户信息
    changeCount (state, num) {
      state.count += num
      console.log('mutations执行了', state.count)
    }

  },
  actions: {
    // 用于异步修改用户信息
    delayChangeCount (context, num) {
      setTimeout(() => {
        context.commit('changeCount', num)
      }, 2000)
    }

  },
  modules: {
    // 用于存储各个模块的状态
    // a: {
    //   state: {
    //   state,
    //   mutations,
    //   ...
    //   },
    //   b:{
    //     ..
    //   }
    // }
  }
})

<template>
    <div class="video">
    <h3>一级组件：视频信息</h3>
    <p>视频id为：{{ id }}</p>
    <router-link :to="{name:'vedio-info1',params:{id:28}}">点赞信息</router-link>
    <router-link :to="{name:'vedio-info2',params:{id:228}}">互动信息</router-link>
    <router-view/>
    </div>
</template>
<script>
export default {
  name: 'VideoView',
  props: ['id']
}
</script>
<style>
</style>

<template>
    <div class="video-info1">
    <h3>二级组件：点赞情况分析111</h3>
    </div>
</template>
<script>
export default {
  name: 'VideoInfo1',
  created () {
    setTimeout(() => {
      // this.$router.push({ name: 'vedio-info2', query: { someData: '我是info1的数据' } })
      console.log(this.$store.state.loginStatus)
    }, 2000)
  }
}

</script>
<style>

</style>

<template>
    <div class="video-info2">
    <h3>二级组件：互动情况分析222</h3>
    </div>
</template>
<script>
export default {
  name: 'VideoInfo2',
  created () {
    console.log(this.$route.query.someData)
    this.handler()
  },
  methods: {
    handler () {
      this.$store.commit('changeCount', 1)
      this.$store.commit('changeCount', 2)
      this.$store.dispatch('delayChangeCount', 10)
      this.$store.commit('changeCount', 3)
      console.log(this.$store.getters.len)
    }
  }
}

</script>
<style>

</style>