vue-router

官网： http://router.vuejs.org/zh-cn/

1.安装 vue-router

方法一： $ npm install vue-router

方法二： 在 package.json 的 dependencies 中配置版本号

通过 命令行 $ npm install 安装

2.配置

步骤一: main.js 引用 -->  import VueRouter from 'vue-router'

步骤二: 使用 use 安装插件 --> Vue.use(VueRouter)

3.调用 --> 使用 v-link

配置 main.js

总结：

通过一个简单的示例来理解一下：

<!-- 导航 -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>

<!-- 路由出口 组件渲染容器 -->
<router-view></router-view>
// 定义路由
const routes = [
  { path: '/home', component: home },
  { path: '/about', component: about }
];
// 创建 router实例，将路由配置传入
const router = new VueRouter({
  routes: routes
});
// 挂载
new Vue({
  el: '#app',
  template: '<App/>',
  router: router,
  components: { App }
});

vue 通过 to 属性来指定链接，导航点击时组件渲染容器就会发生相应的变化，渲染不同的组件。这对于简单的单页面应用已经够用了，在此阶段还没有用过 vuex ，这个好像应对复杂的单页面进行状态管理更优雅一些。

组件间通讯

vue是进行组件式开发，故组件间通讯是必不可少的。vue提供了一种方式，即在子组件定义props来传递父组件的数据对象。

<!-- App.vue -->
<v-header :seller="seller"></v-header>
// header.vue
props: {
  seller: {
    type: Object
  }
}

像上面这样就可以在 header 组件中使用seller对象了。
那么如果子组件想传到父组件呢？

// food.vue 子组件
this.$emit('eventCartadd', event.target);

<!-- goods.vue 父组件 -->
<food v-on:eventCartadd="_drop"></food>

事件派发： vm.$emit 附加参数传给监听器回调