vue学习 32路由精讲之二级路由和三级路由

2024年2月22日 261次阅读 来源: 数学太陡

分级时，默认打开指定下级的路由，使用redirect属性，其值为子级路由的路径path.

子级使用属性children: 值为数组，数组中每个元素都是一个路由对象

二级路由

在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'

在routes中，（routes是由每一个路由对象组成的数组）

{
		path: '/about',
		name: 'aboutLink',
		component: About,
		redirect: '/about/contact',
		children: [{
				path: '/about/contact',
				name: "contactLink",
				component: Contact,
				redirect: '/personname',
				children: [{
						path: '/phone',
						name: "phoneNumber",
						component: Phone
					},
					{
						path: '/personname',
						name: "personName",
						component: PersonName
					}
				]
			},
			{
				path: '/history',
				name: "historyLink",
				component: History
			},
			{
				path: '/delivery',
				name: "deliveryLink",
				component: Delivery
			},
			{
				path: '/orderingGuide',
				name: "orderingGuideLink",
				component: OrderingGuide
			},
		]
	}

About.vue

<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>

三级路由

// 三级路由
import Phone from './components/about/contact/Phone'
import PersonName from './components/about/contact/PersonName'

Contact.vue

<template>
	<div class="card text-dark bg-light mb-3">
		<div class="card-header">联系我们</div>
		<div class="card-body">
			<h4 class="card-title">联系我们</h4>
			<p class="card-text">12345678@qq.com</p>
			<router-link :to="{name:'phoneNumber'}">电话</router-link>
			<router-link :to="{name:'personName'}">联系人</router-link>
			<router-view></router-view>
		</div>
	</div>
</template>

 

    原文作者：数学太陡
    原文地址: https://blog.csdn.net/qq_28137309/article/details/89810342
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞