接下來就是配置路由的問題,vue2.0不在配置路由不在采用router.map的方式,我直接單獨創(chuàng)建一個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數據發(fā)一下 data.json .
接下來的踩坑過程會繼續(xù)與大家分享,大家也可以在下邊留言一起探討,有什么寫的不好的地方,請指出來,謝謝! ^ ^.