设置子路由

 1 /* 
 2 所有路由配置的数组
 3 */
 4 
 5 import Shop from ‘@/pages/Shop/Shop‘
 6 import Goods from ‘@/pages/Shop/Goods‘
 7 import Info from ‘@/pages/Shop/Info‘
 8 import Ratings from ‘@/pages/Shop/Ratings‘
 9 
10 export default [
11   {
12     path: ‘/shop‘,
13     component: Shop,
14     children: [
15       {
16         path: ‘goods‘,
17         component: Goods
18       },
19       {
20         path: ‘/shop/ratings‘,
21         component: Ratings
22       },
23       {
24         path: ‘/shop/info‘,
25         component: Info
26       },
27       {
28         path: ‘‘,
29         redirect: ‘/shop/goods‘
30       }
31     ]
32   },
33 
34 ]

 1 /* 
 2 向外暴露路由器对象模块
 3 */
 4 import Vue from ‘vue‘
 5 import VueRouter from ‘vue-router‘
 6 import routes from ‘./routes‘
 7 
 8 // 声明使用vue插件
 9 Vue.use(VueRouter)
10 
11 export default new VueRouter({
12 
13   mode: ‘history‘, // 路由路径没有#
14 
15   // 项目中所有路由
16   routes
17 })

 1 <template>
 2   <div>
 3     <ShopHeader/>
 4     <div class="tab">
 5       <div class="tab-item">
 6         <router-link to="/shop/goods" >点餐</router-link>
 7       </div>
 8       <div class="tab-item">
 9         <router-link to="/shop/ratings" >评价</router-link>
10       </div>
11       <div class="tab-item">
12         <router-link to="/shop/info" >商家</router-link>
13       </div>
14     </div>
15     <router-view></router-view> 
16   </div>
17 </template>
18 <script type="text/ecmascript-6">
19   import ShopHeader from ‘@/components/ShopHeader/ShopHeader‘
20   export default {
21     components: {
22       ShopHeader,
23     }
24   }
25 </script>