Vue2.0饿了吗踩坑(二)

接下来就是配置路由的问题,vue2.0不在配置路由不在采用router.map的方式,我直接单独创建一个router.js组件抽离出来。

  import Vue from 'vue';
  import VueRouter from 'vue-router';
  import goods from './components/goods/goods.vue';
  import ratings from './components/ratings/ratings.vue';
  import seller from './components/seller/seller.vue';

  Vue.use(VueRouter);

  const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
  routes: [{
  path: '/goods', component: goods
  }, {
  path: '/ratings', component: ratings
  }, {
  path: '/seller', component: seller
  }, {
  path: '*', redirect: '/goods'
  }]
});

export default router;

接下来是在main.js引入

  import Vue from 'vue';
  import App from './App';
  import router from './router';

  Vue.use(VueResource);

  /* eslint-disable no-new */
  new Vue({
  el: '#app',
  router,
  eventHub: new Vue(),
  template: '<App/>',
  components: { App }
  });

配置router的时候要用
<router-link to="/goods ">Go to Foo</router-link> <router-link to="/ratings ">Go to Bar</router-link> <router-link to="/seller ">Go to Foo</router-link>

App.vue文件中需要在在模板中引入路由出口
<router-view></router-view>


我把本地Json数据发一下 data.json .
接下来的踩坑过程会继续与大家分享,大家也可以在下边留言一起探讨,有什么写的不好的地方,请指出来,谢谢! ^ ^.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容