vue项目1-pizza点餐系统4-二级、三级路由

一、目标样式

二、二级路由

在“关于我们”（about）下面设置二级路由。

1、创建组件，在router文件夹中index.js中先导入组件，配置好路由的访问地址，名称。

//二级路由
import Contact from '@/components/about/Contact'
import Delivery from '@/components/about/Delivery'
import History from '@/components/about/History'
import OderingGuide from '@/components/about/OderingGuide'

//配置路由
//children是配置二级路由的标志
//redirect:'contracter'是设置默认的跳转页面
{path: '/about', name: 'aboutLink',redirect:'/history', component: About,children:[
      　{path:'/about/contact',name:"contactLink",redirect:'/contacter',component:Contact,children:[
      　{path:'/adress',name:"adressLink",component:Adress},
        {path:'/contacter',name:"contacterLink",component:Contacter},
        {path:'/phone',name:"phoneLink",component:Phone},
      ]}
]}

2、在about组件中，创建跳转装置和展现的空间

<div class="col-4">
<!-- 导航 -->
  <div class="list-group mb-5">
      <router-link tag="li" class="nav-link" :to="{name:'historyLink'}">
           <!-- ?为啥还用a标签,且不用href属性,list-group-item list-group-item-action什么意思，都是样式需要 -->
           <a class="list-group-item list-group-item-action">历史订单</a>
      </router-link>
      <router-link tag="li" class="nav-link" :to="{name:'contactLink'}">
           <a class="list-group-item list-group-item-action">联系我们</a>
      </router-link>
      <router-link tag="li" class="nav-link" :to="{name:'deliveryLink'}">
           <a class="list-group-item list-group-item-action">快递信息</a>
      </router-link>
      <router-link tag="li" class="nav-link" :to="{name:'oderingGuideLink'}">
      　　　<a class="list-group-item list-group-item-action">点餐文档</a>
      </router-link>
  </div>
</div>
<div class="col-8">
<!-- 导航对应的内容 -->
     <router-view></router-view>
</div>

　这样可以实现二级路由了。

三、三级路由同二级类似，就不赘述了。