vue系列文章(22)路由之二级路由和三级路由

上节中讲解了一级路由，不过大多数的网站，系统，都由二级路由及多级路由组成，

下面讲述二级路由及三级路由，大多数以此类推。

我们在main.js中引入二级路由所需要的页面

// 二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'

在path路径下加入我们要的属性；

const routes = [
  {path: '/',name: 'homeLink',component:Home},
  {path: '/admin',name: 'adminLink',component:Admin},
  {path: '/menu',component:Menu},
  {path: '/login',component:Login},
  {path: '/register',component:Register},
  {path: '/about', redirect: '/about/contact', component: About,children: [
      {path: '/about/contact', name: 'contactLink',component: Contact},
      {path: '/about/delivery', name: 'deliveryLink', component: Delivery},
      {path: '/about/history', name: 'historyLink', component: History},
      {path: '/about/orderingGuide', name: 'orderingGuideLink', component: OrderingGuide}
    ]},
  {path: '*', redirect: '/'}  // * 代表所有，如果没有路由，则跳转到根目录
]

如上述代码所示，我们想在about页面下加入contact,delivery,history等二级路由页面，

则首先在about属性下加入children数组，数组里面加入的对象和一级路由类似。

这样就引入了二级路由。

其中的属性redirect代表的意思是默认进入about显示的是/about/contact所在的页面。

在页面中添加导航路径：

<template>
  <div>
    <div class="row mb-5">
      <div class="col-4">
        <!--导航-->
        <div class="list-group mb-5">
          <router-link tag="li" class="nav-link" :to="{name: 'historyLink'}">
            <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: 'orderingGuideLink'}">
            <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>
        </div>
      </div>
      <div class="col-8">
        <!--导航所对应的内容-->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style>

</style>

 

如上述代码所示，加入我们要引入的路径，采用:to进行绑定，

标签中的tag属性表示的意思是在前端展示的时候显示的是tag对应的标签，如li

通过上面的方式就加入了二级路由。要加入三级路由和二级路由是类似的。

 

如果上面文章对你有用，打赏下我吧@*@