路由的封装注意点

路由的封装注意点

1. 每个组件的export default 里面一定要写name，代表这个组件

children: [{
            path: 'list',
            name: 'order-list',
            component: OrderList
        }

设置子路由的时候，path：‘里面不要写/’，父路由要加
3. 重定向：

path: '/',
        name: 'home',
        component: Home,
        redirect: 'index',
        //重定向：首页'/'会自动跳转到'/index'

4. 路由封装一定要写的（router.js的格式）

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home.vue'//要设置路由的组件，要引用
Vue.use(Router);//路由使用vue的格式
export default new Router({
         routes:[
         {
               path:
               component:(不是componets)
               children:[//子路由
                  {
                     path:
                     component:
                  }
               ]
         }
         ]
})

---------------------------------------------------------------------------------------------------

该项目整体架构：

1. app.vue为总体的根组件
2. home 为index ，product ，detail的根组件，即index ，product ，detail为home的子路由，所以这三个嵌套在home的router-view中，；index为首页，需要路由定向到/index ，由于index ，product ，detail三个组件的样式相同，头部和底部可以复用，所以home引用了NavHeader和NavFooter 组件

        <nav-header></nav-header>
        <router-view></router-view>//index，product，detail
        <nav-footer></nav-footer>

3. 由于订单页面的样式与首页的不同，所以需要换一个架构：
   order为orderlist orderconfirm orderpay alipay的根组件，这三个嵌套在order的router-view中，由于不用设置首页，不需要路由重定向，若想访问orderlist，直接‘…/order/orderlist’即可，orderlist orderconfirm orderpay alipay这四个组件的样式也相同，头部底部可以复用，头部建一个OrderHeader，尾部用NavFooter

        <order-header></order-header>
        <router-view></router-view>//orderlist orderconfirm orderpay alipay
        <nav-footer></nav-footer>

4. 购物车（cart.vue）虽然样式与上着相同，但是要单独写，所以单独设为一个
5. 登录页面（login.vue）的样式也不同，所以分别单独设为一个架构