十次方前端系统开发v1.0--第4章.pdf

第4章 路由与状态管理 学习目标： 理解路由在单页面工程中的作用 掌握可搜索下拉框、复合型输入框等ElementUI的使用，完成招聘管理功能 完成文章管理功能 理解Vuex状态管理在工程中的作用 1 路由vue-router 1.1 什么是vue-router ​ vue-router就是vue官方提供的一个路由框架。使用 Vue.j s ，我们已经可以通过组 合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件 (components)映射到路由(routes) ，然后告诉 vue-router 在哪里渲染它们。 1.2 快速入门 1.2.1 初始化工程  # 全局安装 vue‐cli npm install ‐g vue‐cli # 创建一个基于 webpack 模板的新项目 vue init webpack vue‐router‐demo # 安装依赖，走你 cd vue‐router‐demo npm run dev 1.2.2 路由定义 src/A pp.vue是我们的主界面，其中的router‐view/ 标签用于显示各组件视图内容 北京市昌平区建材城西路金燕龙办公楼一层 电话：400-618-9090 src/router/index.j s是定义路由的脚本 path是路径， name是名称 ，component是跳转 的组件 。 （1）我们现在定义两个页面组件，存放在src/components下 list.vue  template   div     这是一个列表   /div /template about.vue  template   div     关于我们   /div /template （2 ）定义路由 修改src/router/index.j s 北京市昌平区建材城西路金燕龙办公楼一层 电话：400-618-9090  import Vue from  vue import Router from  vue‐router import HelloWorld from  @/components/HelloWorld import list from  @/components/list import about from  @/components/about Vue.use(Router) export default new Router({   routes: [     {       path:  /,       name:  HelloWorld,       component: HelloWorld     },     {       path:  /list ,       name:  List ,       component: list     },     {       path:  /about ,       name:  About ,       component: about     }   ] }) （3 ）放置跳转链接 修改src/app.vu