本文共 2464 字，大约阅读时间需要 8 分钟。

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于  在慕课网的  课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可

授权许可

0 系列文章目录

1 子路由配置

通过歌手列表页而进入歌手详情页，我们这里需要写一个详情页的组件，并将该组件挂载到列表页的子路由下面，并且在 Singer 组件中创建一个 <router-view> 来承载子路由，路由跳转我们写在 listview 组件中，给每一个列表项添加一个点击事件，基础组件里不写业务逻辑，只负责派发事件

// components/singer-detail/singer-detail.vue
   

// router/index.jsimport SingerDetail from 'components/singer-detail/singer-detail'export default new Router({  routes: [    ...    {      path: '/singer',      component: Singer,      children: [        {          path: ':id',          component: SingerDetail        }      ]    }  ]})

// singer.vue
   

// listview.vue
   

从 listview 组件中派发出来的 Singer 类，获取其歌手 id 拼接至子路由路径

// singer.vue
   

运行结果

2 Vuex 配置

 的相关介绍可在官网中进行了解和学习，能够帮助我们解决路由跳转数据传递的问题，我们把相关文件都放在 store 文件夹下， index.js 为入口文件，  文件管理所有状态，  文件进行状态更改， mutation-types.js 文件用来存储跟 mutation.js 文件相关的一些字符串常量，  文件提交 mutation 并可包含异步操作，  文件用来派生状态

目录结构

// store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import * as actions from './actions'import * as getters from './getters'import state from './state'import mutations from './mutations'import createLogger from 'vuex/dist/logger'Vue.use(Vuex)const debug = process.env.NODE_ENV !== 'production'export default new Vuex.Store({    actions,    getters,    state,    mutations,    strict: debug,    plugins: debug ? [createLogger()] : []})

// store/getters.jsexport const singer = state => state.singer

// store/mutations.jsimport * as types from './mutation-types'const mutations = {    [types.SET_SINGER](state, singer) {        state.singer = singer    }}export default mutations

// store/mutation-types.jsexport const SET_SINGER = 'SET_SINGER'

// store/state.jsconst state = {    singer: {}}export default state

安装 Vuex 并在入口文件初始化

// main.jsimport store from './store'new Vue({  el: '#app',  render: h => h(App),  router,  store})

完成初始配置之后，我们会在 singer 组件进行状态写入，在 singer-detail 组件中进行获取

// singer.vue

// singer-detail.vue

运行结果

在控制台中，Vuex 提供的 log 还能帮助我们查看数据的变化

log 打印

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub  上了，有需要的同学可自行下载

End of File

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下 喜欢 和 关注 ，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^

转载地址：http://sngni.baihongyu.com/