如何利用路由器元素实现简易通讯录

一个具有基本增删改查功能的通讯录，数据保存在本地的localStorage中。

演示地址： https://俊俊华华。github。超正析象管

1.所用技术

射流研究…框架https://cn.vuejs.org/武2街：号

用户界面框架http://element.eleme.io/#/zh-CN :元素

脚手架： vue-cli

单页： vue-路由器https://router.vuejs.org/zh-cn/

模块打包：网络包

2.脚手架搭建

# 全局安装$ npm install -g vue-cli#创建一个基于工具模板的新项目$ vue init webpack联系人$ cd联系人#安装依赖$ npm安装$ npm运行开发这是某视频剪辑软件官方基于工具的脚手架，运行开发后浏览器会自动打开localhost:8080，也可以使用运行构建命令，执行建设命令后会自动将科学研究委员会目录中的内容进行编译打包压缩，然后在距离目录中可以看到这些文件

3.目录结构

项目根目录：

建设为构建项目所用的结节代码，配置为构建时的一些配置项，dist为打包后(国家预防机制运行构建用于发布)的代码，节点_模块为结节模块科学研究委员会为开发时所用的代码。

科学研究委员会目录：

资产为全局css，图片，以及一些工具类的js，组件为某视频剪辑软件的组件路由器为路由配置，app.vue为主页面的组件，config.js为目录配置项，main.js为入口射流研究…

4.main.js

从“vue”导入某视频剪辑软件从“应用程序”导入/App.vue "从导入路由器"。/router '从' element-ui '导入ElEMENTui '从' import utils '导入./资产/实用程序。js“导入”元素-ui/lib/主题-粉笔/index。CSS“导入”./资产/正常化。CSS ' Vue。使用(ElementUI)Vue。使用(utils)/* eslint-禁用无新*/新Vue({ El : ' # App ')，路由器、ElEMENTui、template: 'App/'、组件3360 { App } })为主。射流研究…的主要工作是引入一些框架，全局css，以及工具函数，还会处理某视频剪辑软件组件的加载，最后实例化vue。

5.App.vue。某视频剪辑软件文件是什么？https://cn.vuejs.org/v2/guide/single-file-components.html

App.vue可以认为是应用最外层的一个容器。

模板div id=' app ' div class=' app-left ' El-row class=' tac ' El-col El-menu : default-active=' menuIndex ' class=' El-menu-vertical-demo ' background-color=' # 545 c64 ' text-color=' # fff ' : unique-open=' menuUniqueOpen ' : router=' menu router ' active-text-color=' # ffd 04b ' H3我的应用/h3模板v-for='(菜单项，索引)'在menuData！-此处的指数需显示转换为字符串，否则会报警告埃尔子菜单：index=' ' '(索引1)模板槽=' title ' { item。name } }/template模板v-for='(子项，I)在item.value！-此处指数格式为父级的指数加上下划线加上当前的指数，指数都需加1 -路由器-链接标记=' span ' :到=' SuBject。路径' El-菜单项：索引=' SuBject。名称“{ SuBject。标题} }/El-菜单项/路由器-链接/模板/El-子菜单/模板/El-菜单/El-col/El-row/div class=' app-right '路由器-视图/路由器-视图/div/模板脚本导入菜单数据自' ./config ' export default { name : ' app '，data () { return { menuData，menuIndex: ' '，//菜单当前所在位置menuUniqueOpen: true，//菜单项是否唯一开启menurounters : true//是否开启路由模式} }，挂载了：函数(){ 0.}，观看： {“$ route”(到){ this。menuindex=to。name } } }/script这边偷了一个懒，没有把左侧的菜单单独做成一个某视频剪辑软件而是混入App.vue中。

6.路由

在正式写代码之前，首先要确定要项目的结构，模块如何划分，哪个模块对应哪个路由。

因为整个项目现在就划分出两个大板块，通讯录与记账本，所以路由第一级就只有接触和账户两种。

Vue.use(VueRouter)让my router=new vue router({ routes :[{ path : ' *，component: ()=import('./components/notfoundcomponent . vue ')}，{ path: '/'，redirect: '/contact' }，{ path: '/contact '，name: 'Contact '，component: ()=import('./components/Contact/list . vue ')}，{ path: '/contact/edit '，name: 'Contact '，components :()=import('./components/contact/edit . vue ')}，{ path: '/account '，name: 'Account '，components :()=import('./components/account/list . vue ')}]})你可以看到上面的/contact和/contact/edit的名字是一样的，就是让活动状态停留在添加或编辑联系人页面下左侧的我的联系人上，在App.vue中可以看到代码this.menuindex

虽然vue会报告一个警告告诉我不要重复名字【捂脸】，但这是暂时可以想到的操作模式。已经考虑过通过判断路径来决定是否显示高亮状态，但是当目录层次深且复杂时，就不太可靠了。

为什么组件是这种形式，而不是直接使用组件名？因为当有更多的路由时，一次加载所有组件会非常非常慢，而且会加载到很多当时没有使用的组件。通过导入的形式，webpack可以将路由转换中使用的组件单独打包，网页会根据使用情况重新运行。

由于路由器是vue的一个组件，请记住使用VUE。

7.联系人列表页面-联系人/列表. vue

模板' div class='联系人列表' div class='联系人列表-标题El-button @ click=' GoTonew ' type=' primary '新增联系人/El-button/div class='联系人列表-内容'模板' div class='联系人列表-包装h3高级检索/H3 El-form ref='联系人搜索' : model='搜索参数' : inline=true El-form-项目标签='姓名El-input v-model='搜索参数。'姓名'占位符='请输入需要检索的姓名/El-input/El-form-item/El-form El-button type=' primary ' size=' mini ' round @ click=' contact search(' contact search ')搜索/el-button /div div class='联系人列表-包装h3联系人列表/H3 El-table : data=' listNewData ' style=' width : 100% ' @ row-click=' view contact ' : default-sort=' { prop : ' name '，order: '降序}“El-table-column标签=”姓名prop='name '可排序宽度=' 180 '/El-表格-列.El-表格-列标签='功能模板作用域='作用域El-button size=' mini ' type=' primary ' @ click。stop=' editContact(作用域)'编辑/El-button El-button size=' mini ' @ click。stop='删除联系人(作用域)'删除/El-button/template/El-table-column/El-table/div/template/div contact-view ref=' contact view ' : view data='鱼腥草' : view show。sync=' view show '/contact-view/div/template脚本从导入联系人视图' ./view。vue ' export default { data()}.}，组件： { contactView }，计算： { listNewData:函数()}.}，挂载ed :函数(){ this。listdata=this。utils。GetLocalStorage(' vueContact ')}，方法： { Gotone w : function(){ this .$router.push('/contact/edit') }，sexFormatter:函数（行){ 0.}，deleteContact:函数(res)让数据=res.row this .$confirm('此操作将永久删除该联系人，是否继续？', '提示，{ confirmButtonText: '确定，取消按钮文本： '取消，键入：“警告”，回调：(动作)={ if(动作==='确认'){ this .$delete(this.listData，Data。这个。utils。setlocalstorage(' vueContact '，这个。listdata)} })})，editContact:函数(res) {让数据=res.row this .$路由器。push({ path : '/contact/edit '，query: {id: data.id} }) }，viewContact:函数(行){这个。viewsshow=true this。kedata=这个。列表数据[行。id]}，联系搜索：函数(){让数据=这个。utils。getlocal storage(' vueContact ')让新数据={ }用于(让项进入数据){ if(data[item name]index of(this)} .相当于该模块的主页，新增与编辑页面通过右上角的新建按钮或者列表中的编辑按钮进入，查看页面通过引入View.vue作为一个弹窗放在列表页中展示，不单独设置路由。

列表展示所使用的是elementUI的桌子组件

删除对象时一定要使用$删除，否则不会触发视图更新

view.vue代码：

模板div class=' contact-view ' El-dialog : before-close=' closePop ' ref=' my dialog ' : visible=' view show ' El-form : model=' view data ' label-width=' 60px ' El-form-item label='姓名prop=' name ' El-input : readonly=' true ' v-model=' view data。名称'/El-输入/El-表单-项目.El-form项目标签='备注El-input : readonly=' true ' type=' text area ' v-model=' viewData。desc '/El-输入/El-表单-项目/El-表单/El-对话框/div/模板脚本导出默认值{ prop :[' view show '，' viewData']，methods : { close pop : function(){//需手动关闭弹窗，找到父组件中调用的地方进行事件的触发这个。$家长参考文献。联系人视图。$ emit(' update : view show '，false) } } }/script这里有个比较值得注意的点，就是关闭查看弹窗，弹窗的开启关闭状态通过目录也就是父级中的视展来控制，视图显示通过视角也就是子级中的小道具流入到子级中，但是某视频剪辑软件中的数据流向是默认是单向的，想要子级中修改父级属性必须使用发射，详见上面代码。

这里elementUI的对话框组件本来是自己关闭的，会报错，只能自己修改。

Ps:为什么vuex不在这里处理父子组件之间的通信？因为如果是大型后台管理系统，这样的情况会经常发生。如果在vuex管理，vuex会很大，不利于维护。

8.联系人编辑(新)页面- edit.vue

模板div class=' contact-edit ' El-form ref=' contact form ' : model=' form ' : rules=' rules ' label-width=' 80px ' El-form-item label=' name ' prop=' name ' El-input v-model=' form . name '/El-input/El-form-item El-form-item label=' gent ' El-select v-model=' form。性别'占位符='请选择性别' El-选项标签='男性'值='男性'/El-选项El-选项标签='女性'值='女性'/El-选项/El-选择/El-表单-项目.El-form-item标签='备注' El-input type=' textarea ' v-model=' form . desc '/El-input/El-form-item El-form-item El-button type=' primary ' @ click=' on submit(' contact form ')' { { BTN姓名} }/El-button El-button @ click=' cancel form ' cancel/El-button/El-form-item/El-form/div/template script export default { data(){ var name valid=(规则、值、回调)={ if(！Value) {callback(new Error ('name不能为空')} else { callback()} } var mobile valid=(rule，Value，callback)={ let phone pattern=/(\ s * $)|([1][3，4，5，7，7，phone pattern。test (value)) {callback (newerror('电话号码格式不正确')} else { callback()} } return { type : ' '，//控制它是否是新的.rule s : { name 3360[{ validator : name valid，trigger:' blur'}]，mobile :[/{ required d : true，message: '手机号码不能为空'，trigger:' blur'}，{ validator: mobileValid，trigger : ' blur ' } } }，//hook mount ed : function(){ this。checkpagestatus(这。$ route.query.id)}组件加载后，//钩子beforerouteupdate3360function函数(to，from，Next) {this。checkpagestatus(到。query.id) next ()}，methods : {//检查页面是创建的还是编辑的checkpagestatus 3360函数(id){ 0.}.cancelForm:函数(){ this。$router.push('/contact') }，OnSubmit 3360 FuncTion(form name){ 0.}}/script可以看到mounted和beforrouteupdate中的代码有些重叠，因为当路由只是参数转换时vue不会重载组件，所以需要处理beforrouteupdate中的初始数据。

名称有效和移动标识是表单验证的功能。el-form配置了rules属性的名称，然后可以将相应的规则添加到数据中以打开表单验证。但是，需要注意的是，在规则生效之前，必须在el-form-item上设置相应的prop属性。

9.摘要

一个非常简单的项目，但有几点必须注意：

模块的划分要合理，尽可能保证模块的可重用性

在状态管理中，需要明确哪些应该放入vuex，哪些不应该放入，以免项目的维护变得更加复杂

如果是大型项目。必要时必须导入vue文件，否则会增加初始加载的负担

为了减少空间，减少很多不重要的代码，请移步查看源代码。项目地址：https://github.com/junjunhuahua/vue-basic-demo

github上的项目已经更改为在后台提供接口，localStorage不再用于操作数据。后台项目由MongoDB节点实现。具体项目是https://github.com/junjunhuahua/mongodb-demo

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。