vue路由配置

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>