Vue组件和路由学习

一、 组件基础

• 组件复用
• data必须写为函数形式
• 自定义组件的属性。通过prop向子组件传递数据
• 单个根元素
• 自定义事件，监听子组件事件$emit(“事件名”,“参数名”)
• 使用事件抛出值$event或方法第一个参数
• 在组件使用v-model
• 通过插槽分发内容。slot标签
• 动态组件：通过Vue的component元素加一个特殊的is 属性实现。属性可以是常规HTML元素的属性，但是如果是value需要使用.prop修饰器。
• 解析DOM模板时的注意事项：

二、深入了解组件

2.1 组件名

• 组件名：在注册组件时，不论是局部注册的方式还是全局注册，都需要组件名。全局注册时组件名是第一个参数。当直接在DOM中使用组件时，推荐W3C中的自定义组件名规范，（字母全小写，且包含一个连字符）防止和HTML元素冲突。
• 组件名大小写，定义组件名有两种方式：
  • 使用kebab-case。推介这种
  • 使用PascalCase
• 全局注册：注册之后可以用在任意新创建的Vue根实例中。在所有子组件中也是，三个组件在各自内部可以相互使用。
• 局部注册：当使用webpack构建系统时，全局注册所有的组件意味着即使不在使用组件，仍然会被构建，这造成用户下载JavaScript的无谓增加。注意：局部注册的组件在其自组件中不可用。
  • 如果通过Babel和webpack使用ES2015模块，代码看起来像
• 模块系统：可以导入外部组件，通过这样引入。
  
• 基础组件的自动化全局注册：通用组件会被频繁用到。使用require.context只全局注册通用基础组件。
• 注意：全局组件的行为必须在Vue根实例创建之前发生。

2.2 prop

• Prop的大小写：HTML中attribute名的大小写不敏感，浏览器会全部解析为小写。所以使用DOM中的模板时，要使用短横线分割命名法。
• Prop类型：
  • 字符串数组形式

三、规模化

3.1路由

• 官方路由：对于大多数单页面应用，都推荐使用官方支持的vue-router库。
• 只需要简单的路由不想引起一个功能完整的路由库，可以动态渲染页面组件。
• 如何使用：
  1. 引入Vue.js和vue-router.js
  2. 创建div，id属性
  3. 路由链接和路由出口
  4. 在js中定义组件或外部引入const foo = {template:""}
  5. 定义路由 const router=[{path:’’,component:},{}]
  6. 创建router实例 const router = new VueRouter({routes})
  7. 创建vue实例，配置router，启动应用。new vue({router}).$mount(’#app’)

3.2 安装

• 直接下载
• NPM
• 构建开发版

3.3 介绍

• Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心集成，使得单页面构建更加容易。
• 功能：
  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue.js过度系统的视图过渡效果
  • 细粒度的导航控制
  • 自动激活的Css class链接
  • 自定义滚动条
  • H5历史模式或hash模式

3.4 动态路由匹配

• 我们需要把某种模式匹配的路由全部映射到同个组件，那么可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果。给路径参数使用:标记，当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用
• 相应路由参数的变化：当使用路由参数时，组件实例会被复用，两个路由渲染同个组件，复用更高效，但是生命周期钩子函数不会被调用。想对路由参数的变化相应的话，可以watch $route对象。或者使用2.2的beforeRouteUpdate
• 获取所有路由或404路由：
  • 常规参数会被/分隔url中的字符，如果想匹配任意路径，可以使用通配符*
  • 使用通配符时，请确保路由顺序正确，也就是包含通配符的路由应该放在最后。使用通配符，$router.params内会自动添加名为pathMatch参数。
  • 高级匹配模式：使用path-to-regexp作为路径匹配引擎，支持很多高级匹配模式。
  • 匹配优先级：当同一个路径匹配多个路由时，谁先定义，谁的优先级高

3.5 嵌套路由

• 实际生活中的应用界面，通常由多层嵌套的组件组合而成，URL中的各段动态路径也是对应嵌套的各种组件。
• 如何使用：在组件中包含自己的嵌套router-view，在route参数中使用children配置。以/开头的嵌套路径会被当做根路径，可以充分的使用嵌套组件而无需设置嵌套路径。

3.6 编程时导航

• 除了使用router-link创建a标签定义导航链接，还可以使用router的实例方法，通过编写代码实现。
• 在Vue实例内部可以通过$router访问路由实例。可以调用this.$router.push。想导航到不同的url，使用router.push方法，这个方法会想history栈加一个印记，用户点击回退回到之前url。点击router-link:to=" "，等于调用router.push。
• 可以用router去操作history

3.7 命名路由

• 通过名称标识路由方便，特别是链接路由，或执行跳转的时候。可以在创建Router实例的时候，在routes配置中给路由设置名称。
• 要链接到命名路由，可以给router-link的to属性传一个对象，和代码调用router.push()一样

3.8 命名视图

• 同级展示多个视图，如果router-view没有设置名字mm偶认为default。
• 一个视图用一个组件渲染，因此对于同个路由，多个视图就需要多个组件，确保正确使用components
• 嵌套命名视图用法。

3.9 重定向

• 通过routes配置完成。
• 起别名

3.10 路由组件传参

• 使用$route会使之与其对应路由形成高度耦合，使得组件只能在某些url上使用，限制了灵活性。
• 使用props将组件和路由解耦。