官网： 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

总结：

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

     
     
      home
     
     
      about
     
     
     // 定义路由const routes = [  { path: '/home', component: home },  { path: '/about', component: about }];// 创建 router实例，将路由配置传入const router = new VueRouter({  routes: routes});// 挂载new Vue({  el: '#app',  template: '
     ',  router: router,  components: { App }});

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

组件间通讯

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

     
     // header.vueprops: {  seller: {    type: Object  }}

像上面这样就可以在 header 组件中使用seller对象了。

那么如果子组件想传到父组件呢？

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

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