https://router.vuejs.org/zh-cn/
1.main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' 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) Vue.config.productionTip = false // 2. 定义路由 const routes = [ { path: '/goods', component: goods }, { path: '/ratings', component: ratings }, { path: '/seller', component: seller } ] // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 new Vue({ router, template: '<App/>', components: { App } }).$mount('#app') routes.push('goods') 2.App.vue <template> <div> <kheader> </kheader> <div class="tab"> <router-link to="/goods" class="tabItem">商品</router-link> <router-link to="/ratings" class="tabItem">评论</router-link> <router-link to="/seller" class="tabItem">商家</router-link> </div> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </template> <script> import kheader from './components/vheader/kheader.vue' export default{ components: { kheader } } </script> <style lang="stylus" rel="stylesheet/stylus"> .tab{ display flex width 100% height 40px } .tab .tabItem{ flex :1 text-align :center } </style>