美文网首页
Vue2.0饿了吗踩坑(二)

Vue2.0饿了吗踩坑(二)

作者: 三千故事可流水 | 来源:发表于2017-03-01 22:03 被阅读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 .
    接下来的踩坑过程会继续与大家分享,大家也可以在下边留言一起探讨,有什么写的不好的地方,请指出来,谢谢! ^ ^.

    相关文章

      网友评论

          本文标题:Vue2.0饿了吗踩坑(二)

          本文链接:https://www.haomeiwen.com/subject/ihicgttx.html