下载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>