vue2.0 vue router的使用
App.vue
<template>
<div id="app">
<v-header></v-header>
<div class="tab">
<router-link class="tab-item" to="/goods">商品</router-link>
<router-link class="tab-item" to="/ratings">评论</router-link>
<router-link class="tab-item" to="/seller">商家</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: '/goods', component: goods },
{ path: '/ratings', component: ratings },
{ path: '/seller', component: seller }
]
});
/* eslint-disable no-new */
// 跳过no-new 的eslint校验
new Vue({
router,
el: '#app',
components: { App },
template: '<App/>'
}).$mount('#app');
router.push('/goods');
注意这里的默认路由设置是 push,而vue 1.0是 go ,如果在vue2.0中使用router.go('/goods'); 则会出现无限循环的问题。
另外,这里的components路径应该是../components , 这里再附上webpack路径的配置,
webpack.base.conf.js
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': resolve('src/components'),
'common': resolve('src/common')
}
},
这里的配置也和vue1.0 有所不同希望我的入坑经验对你有所帮助,愿圣光与你同在