小结放在前：先祝大家新年快乐！鸡年大吉大利！在新的一年里大家都有跳跃般的成长！作为新年的第一篇文章，就拿他来给大家拜个年！！！文章前部份讲解了vue-router路由的配置，后半部分为去年的文章添加了两个知识点 props 和 $emit 组件间的通信，希望大家看完有所收获！！！

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生

请点击这里

先看效果：

注意：我这里用的是 vue-cli 做的演示

## vue-router

第一步当然是安装了，用npm安装命令 npm install vue-router --save-dev

第二步在.vue组件里添加标签，格式如下

    
     
    
          
          
          
      
       Go to Foo
      
     
     
     
    

第三步在main.js文件里配置路由，格式如下

import VueRouter from 'vue-router'// 1. 定义（路由）组件。// 加载组件import Page01 from './max'Vue.use(VueRouter)//全局安装路由功能// 2. 定义路由// 每个路由应该映射一个组件。 const routes = [  { path: '/1', component: Page01 }   //前面to指定的地方 path  /1]// 3. 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({  routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能new Vue({  el: '#app',  template: '
    ',  components: { App },  router})// 现在，就可以重启试试了！

注意 routes 和 router 是不一样的单词，别眼花了

路由就是这么的简单！

props

父组件向子组件传值

在子组件里添加 prors ，格式如下

props: [    'rimag',    'hyaline',    'levels',    'ohyaline'],

然后是在父组件里向子组件里传值，格式如下

//HTML
    // 传值用绑定//JSdata () {    return {      mgse: -20.62,      orctiy: 0,      vels: -1,      ortiy: 0    }}

点击后父组件就会将data里的数据绑定到子组件的props里

$emit

子组件改变父组件的值，通过$on将父组件的事件绑定到子组件，在子组件中通过$emit来触发$on绑定的父组件事件

先在父组件里将值绑定给子组件并监听子组件变化，格式如下

//HTML
    //JSlisten: function (mgs, orc, cel, ort) {  this.mgse = mgs  this.orctiy = orc  this.vels = cel  this.ortiy = ort}

之后在子组件data里建要改变的值，格式如下

mgs: -20.62,orc: 0,cel: -1,ort: 0

然后建个方法

dis: function () {  this.$emit('child-say', this.mgs, this.orc, this.cel, this.ort)}

给某个元属添加点击事件触发刚建的方法

有点乱，欢迎大家来纠正