一、目标样式
二、二级路由
在“关于我们”(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>
这样可以实现二级路由了。
三、三级路由同二级类似,就不赘述了。