二级路由的建立

1、在pages下再分别建立 One.vue,  Two.vue两个组件

2、然后在main.js中使用
           import One from './pages/One.vue'
           import Two from './pages/Two.vue'
      导入这两个模块

3、 然后在相应的组件路由规则中使用 children  关键字去配置路由规则,再次选择market中做实例:


const routes = [
          {path: '', component: Home},
         {path: '/home', component: Home},
         {path: '/cart', component: Cart},
         {path: '/market', component: Market,children:[
                     {path: '', component:One},
                     {path: 'one', component: One},
                     {path: 'two', component: Two}
          ]},
         {path: '/mine', component: Mine}
]


4、再去对应的Market.vue组件中呈现组件内容:


          <router-link to="/market/one">二级组件之一</router-link>
          <router-link to="/market/two">二级组件之二</router-link>
          <router-view></router-view>

posted @ 2017-10-17 21:33  不乱来的嫖客  阅读(143)  评论(0编辑  收藏  举报