下载vue-router: cnpm install vue-router --save
router/main.js
/*引入所需要的组件*/
import VueRouter from ‘vue-router‘;
import about from "compontents/about.vue"
import news from "compontents/news.vue"
import Router from ‘vue-router‘
import VueResource from ‘vue-resource‘;
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(Router);
const routes = [ //这里是routes，没有r
{ path: ‘/goods‘, component: goods },
{ path: ‘/ratings‘, component: ratings },
{ path: ‘/seller‘, component: seller }
];
const router = new VueRouter({
routes,
linkActiveClass:‘active‘
});
router.push(‘/goods‘);
new Vue({
el:‘#app‘,
router,
template:‘<App/>‘,
components: { App }
})
compontents/about.vue 与compontents/news.vue 一样
<template>
<div>
我是关于我们/我是新闻
</div>
</template>
<script>
export default {
}
</script>
将about.vue和news.vue链接起来
<template> <div id="app"> <div class="tab"> <div class="tab-item"> <router-link to="/about">关于</router-link> </div> <div class="tab-item"> <router-link to="/news">新闻</router-link> </div> </div> <div> <router-view></router-view> </div> </div> </template>