设置子路由

在shop组件中需要实现这种效果

头部有一个shopheader组件

中间有三个点击路由的地方，点击其中的一个可以切换到相应的路由

分别建立三个组件点餐   评论    商家

建立router文件夹，建立index.js和routes.js

在routes.js注册路由组件

/* 
所有路由配置的数组
*/

import Shop from '@/pages/Shop/Shop'
import Goods from '@/pages/Shop/Goods'
import Info from '@/pages/Shop/Info'
import Ratings from '@/pages/Shop/Ratings'

export default [
  {
    path: '/shop',
    component: Shop,
    children: [
      {
        path: 'goods',
        component: Goods
      },
      {
        path: '/shop/ratings',
        component: Ratings
      },
      {
        path: '/shop/info',
        component: Info
      },
      {
        path: '',
        redirect: '/shop/goods'
      }
    ]
  },

]

在index.js中进行向外暴露路由组件

/* 
向外暴露路由器对象模块
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

// 声明使用vue插件
Vue.use(VueRouter)

export default new VueRouter({

  mode: 'history', // 路由路径没有#

  // 项目中所有路由
  routes
})

在shop组件中

<template>
  <div>
    <ShopHeader/>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/shop/goods" >点餐</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/ratings" >评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/info" >商家</router-link>
      </div>
    </div>
    <router-view></router-view> 
  </div>
</template>
<script type="text/ecmascript-6">
  import ShopHeader from '@/components/ShopHeader/ShopHeader'
  export default {
    components: {
      ShopHeader,
    }
  }
</script>