可以看到上面/contact和/contact/edit的name是相同的，这是为了让在新增或者编辑联系人页面下，还能让active状态停留在左侧我的联系人上，可以看到App.vue中的代码this.menuIndex = to.name就是进行的该操作，
虽然这样vue会报一个warn告诉我别重名[捂脸]，暂时能想到的就是这样的操作方式了，有考虑过依靠判断path来确定是否显示高亮状态，但是当目录层级较深且较复杂的情况下，这样就不是很靠谱了。
component这里为什么是这种形式，而不是直接用一个组件名呢，因为当路由开始多起来的时候，一下把所有的组件都加载进来会非常非常慢且会加载到许多当时并没有用到的组件，通过import这种形式，可以让webpack将路由变换时用到的组件分开打包，网页会根据使用情况再进行
由于router是vue的组件，所以使用时记得要Vue.use一下。
7. 联系人列表页 --- contact/list.vue
<template> <div> <div> <el-button @click="goToNew" type="primary">新增联系人</el-button> </div> <div> <template> <div> <h3>高级检索</h3> <el-form ref="contactSearch" :model="searchParams" :inline=true> <el-form-item label="姓名"> <el-input v-model="searchParams.name" placeholder="请输入需要检索的姓名"></el-input> </el-form-item> </el-form> <el-button type="primary" size="mini" round @click="contactSearch('contactSearch')">搜索</el-button> </div> <div> <h3>联系人列表</h3> <el-table :data="listNewData" @row-click="viewContact" :default-sort="{prop: 'name', order: 'descending'}" > <el-table-column label="姓名" prop="name" sortable> </el-table-column> ... <el-table-column label="功能"> <template scope="scope"> <el-button size="mini" type="primary" @click.stop="editContact(scope)">编辑</el-button> <el-button size="mini" @click.stop="deleteContact(scope)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> </div> <contact-view ref="contactView" :viewData="curData" :viewShow.sync="viewShow"></contact-view> </div> </template> <script> import contactView from './View.vue' export default { data () { ... }, components: { contactView }, computed: { listNewData: function () { ... }, mounted: function () { this.listData = this.utils.getLocalStorage('vueContact') }, methods: { goToNew: function () { this.$router.push('/contact/edit') }, sexFormatter: function (row) { ... }, deleteContact: function (res) { let data = res.row this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', callback: (action) => { if (action === 'confirm') { this.$delete(this.listData, data.id) this.utils.setLocalStorage('vueContact', this.listData) } } }) }, editContact: function (res) { let data = res.row this.$router.push({ path: '/contact/edit', query: {id: data.id} }) }, viewContact: function (row) { this.viewShow = true this.curData = this.listData[row.id] }, contactSearch: function () { let data = this.utils.getLocalStorage('vueContact') let newData = {} for (let item in data) { if (data[item].name.indexOf(this.searchParams.name) > -1) { newData[item] = data[item] } } this.listData = newData } } } </script>
list.vue相当于该模块的主页，新增与编辑页面通过右上角的新建按钮或者列表中的编辑按钮进入，查看页面通过引入View.vue作为一个弹窗放在列表页中展示，不单独设置路由。
列表展示所使用的是elementUI的table组件
删除对象时一定要使用$delete，否则不会触发视图更新
view.vue代码：
<template> <div> <el-dialog :before-close="closePop" ref="myDialog" :visible="viewShow"> <el-form :model="viewData" label-width="60px"> <el-form-item label="姓名" prop="name"> <el-input :readonly="true" v-model="viewData.name"></el-input> </el-form-item> ... <el-form-item label="备注"> <el-input :readonly="true" type="textarea" v-model="viewData.desc"></el-input> </el-form-item> </el-form> </el-dialog> </div> </template> <script> export default { props: ['viewShow', 'viewData'], methods: { closePop: function () { // 需手动关闭弹窗,找到父组件中调用的地方进行事件的触发 this.$parent.$refs.contactView.$emit('update:viewShow', false) } } } </script>