路由综合运用

实验题目

路由设计

实验目的

掌握普通路由、命名路由、重定向路由和嵌套路由的基本使用

掌握单页路由、全站路由的设计与开发

掌握编程路由和路由守卫的常见应用

路由样式的使用

实验内容

主路由设计

其它路由设计，如产品列表页到产品详情页

访问量

切换标题

页面切换进度条

面包屑导航*

参考效果和参考代码

创建项目

创建路由

创建SFC

面包屑导航

.创建组件 Breadcrumb.vue

.引入路由

import { useRoute } from 'vue-router';
const route = useRoute();

.使用路由

<div class="bread">
<router-link v-for="(item, index) in route.matched" :key="index" :to="item.path">{{ item.name }}</router-link>
</div>

.仅仅使用路由信息渲染面包屑

<div class="bread">
<div v-for="(item, index) in route.matched" :key="index">{{ item.name }}</div>
</div>

拓展与思考

根据需要，使用动态路由、查询路由或传参路由传递参数

保存/推送项目到自己的代码仓库*

说明

现场验收、课后提交实验报告