美文网首页
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饿了吗踩坑(二)

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

  • Vue2.0饿了吗踩坑(一)

    在学习Vuejs之前是先学习的Angularjs框架和React框架,都是前端比较火的MVVM框架,但是二者皆有优...

  • Vue UI框架库合集

    上车! Element - 饿了吗出品的Vue2.0 Web UI工具套件 Vux - 基于Vue和Web...

  • Vue2.0踩坑

    Tips 1.命名规范: 一是不使用非法的标签字符;二是不与 HTML 元素(区分大小写)或 SVG 元素(不区分...

  • element组件分析

    一、element生态 1.版本 基于vue2.0,由饿了吗官方维护 (去年年底上线element plus支持...

  • vue2.0踩坑之旅

    初入vuejs,描述一些踩坑经历 methods方法不能使用es6的写法来实现 这样写的话,会发现数据不会发生变化...

  • 高仿饿了么app项目

    在制作项目的时候踩的坑 1、vue2.0不支持挂载 2、stylus与stylus-loader安装版本为最新版 ...

  • Vue2.0全家桶项目踩的坑(二)

    在项目中有一处需要保证输入数据的格式,所以使用了 标签,但随之又引来了一个问题,即因为保持输入格式,所以文字超过了...

  • JavaScrip-StepPitGuide《JavaScrip

    《JavaScript踩坑指南》JavaScrip-StepPitGuide? 《JavaScript踩坑指南》 ...

  • 算法踩坑6-二叉搜索树排序

    背景 接上面五篇文章算法踩坑-快速排序 算法踩坑2-插入排序 算法踩坑3-堆排序 算法踩坑4-冒泡排序 ...

网友评论

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

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