正心全栈编程-文档站

Appearance

切换页面 ​

目的：点击导航 a 标签，实现下面页面内容的切换

建议：新初始化一个空白的项目来写，避免新手放到一起，看的乱

要求：网页打开默认显示 - 首页部分

规范：

  • views/ 4 个页面 .vue 文件
  • router/index.js - 路由配置
  • App.vue 显示，main.js 注册路由

效果：

13.5_课上练习_导航切换

参考答案
vue
<script setup></script>

<template>
  <div class="container">
    <div class="header">
      <router-link to="/index">首页</router-link>
      <router-link to="/cate">分类</router-link>
      <router-link to="/order">订单</router-link>
      <router-link to="/my">我的</router-link>
    </div>
    <router-view />
  </div>
</template>

<style scoped>
.container {
  height: 800px;
}

.header {
  margin-top: 20px;
}

.header a {
  margin: 20px;
}
</style>
js
import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/index",
    name: "index",
    component: () => import("../views/Index.vue"),
  },
  { path: "/my", name: "my", component: () => import("../views/My.vue") },
  {
    path: "/order",
    name: "order",
    component: () => import("../views/Order.vue"),
  },
  { path: "/cate", name: "cate", component: () => import("../views/Cate.vue") },
];

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

export default router;
vue
<template>
  <h1>首页</h1>
</template>

<script setup></script>

<style scoped></style>
vue
<template>
  <h1>分类</h1>
</template>

<script setup></script>

<style scoped></style>
vue
<template>
  <h1>订单</h1>
</template>

<script setup></script>

<style scoped></style>
vue
<template>
  <h1>我的</h1>
</template>

<script setup></script>

<style scoped></style>

二级路由嵌套 ​

图示：

14.3_路由嵌套练习

参考答案

在 App.vue 新增二级路由导航 <router-link to="/sports">体育（二级路由）</router-link>

vue
<template>
  <div>
    <h1>体育</h1>
    <div class="nest">
      <router-link to="/sports/main">体育主页</router-link>
      <router-link to="/sports/domestic">国内体育</router-link>
      <router-link to="/sports/abroad">国外体育</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup></script>

<style scoped>
.nest a {
  margin: 20px;
}
</style>
vue
<template>
  <div>
    <h2>体育主页</h2>
  </div>
</template>

<script setup></script>

<style scoped></style>
vue
<template>
  <div>
    <h2>国外体育</h2>
  </div>
</template>

<script setup></script>

<style scoped></style>
vue
<template>
  <div>
    <h2>国内体育</h2>
  </div>
</template>

<script setup></script>

<style scoped></style>
js
const routes = [
  // ... 新增下面内容
  {
    path: "/sports",
    name: "sports",
    redirect: "/sports/main",
    component: () => import("../views/sports/Index.vue"),
    children: [
      {
        path: "main",
        component: () => import("../views/sports/Main.vue"),
      },
      {
        path: "domestic",
        component: () => import("../views/sports/Domestic.vue"),
      },
      {
        path: "abroad",
        component: () => import("../views/sports/Abroad.vue"),
      },
    ],
  },
];

三级路由嵌套 ​

要求：

  • 默认显示第一个 UI_Router 路由 (一级路由) 3 个组件
  • 第二个组件需要嵌入导航和二级路由 展示区域
  • Bob 下才需要第三个路由嵌入

提示：点击按钮使用编程式导航，可以在 2 级路由导航路径 (带 2 个/的) 先写成一个数组，随机取 1 个然后跳转即可

问题：可能会爆出警告，编程式导航如果当前已经在这页，还想跳转当前路由就会出个警告，无需关心不影响功能

Day05_课后作业_嵌套路由作业

参考答案 - 二级路由部分

新增二级目录文件 users/Index.vue、users/normal/Index.vue、users/vip/Index.vue、users/employee/Index.vue

vue
<template>
  <div>
    <h2>用户管理</h2>
    <div class="users">
      <router-link to="/users/normal">普通用户</router-link>
      <router-link to="/users/vip">VIP 用户</router-link>
      <router-link to="/users/employee">内部员工</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup></script>

<style scoped>
.users a {
  margin: 20px;
}
</style>
vue
<template>
  <h3>普通用户管理</h3>
</template>

<script setup></script>

<style scoped></style>
vue
<template>
  <h3>VIP 用户管理</h3>
</template>

<script setup></script>

<style scoped></style>
vue
<template>
  <h3>内部员工管理</h3>
</template>

<script setup></script>

<style scoped>
.employee a {
  margin: 20px;
}
</style>
参考答案 - 三级路由部分
vue
<template>
  <h3>内部员工管理</h3>
  <div class="employee">
    <router-link to="/users/employee/department">部门管理</router-link>
    <router-link to="/users/employee/info">员工信息</router-link>
    <router-link to="/users/employee/project">项目管理</router-link>
  </div>
  <router-view></router-view>
</template>

<script setup></script>

<style scoped>
.employee a {
  margin: 20px;
}
</style>
vue
<template>
  <h4>部门管理</h4>
</template>

<script setup></script>

<style scoped></style>
vue
<template>
  <h4>信息管理</h4>
</template>

<script setup></script>

<style scoped>
.users a {
  margin: 20px;
}
</style>
vue
<template>
  <h4>项目管理</h4>
</template>

<script setup></script>

<style scoped></style>
js
const routes = [
  // 新增路由数据
  {
    path: "/users",
    name: "users",
    component: () => import("../views/users/Index.vue"),
    children: [
      {
        path: "employee",
        component: () => import("../views/users/employee/Index.vue"),
        children: [
          {
            path: "info",
            component: () => import("../views/users/employee/Info.vue"),
          },
          {
            path: "project",
            component: () => import("../views/users/employee/Project.vue"),
          },
          {
            path: "department",
            component: () => import("../views/users/employee/Department.vue"),
          },
        ],
      },
      {
        path: "normal",
        component: () => import("../views/users/normal/Index.vue"),
      },
      {
        path: "vip",
        component: () => import("../views/users/vip/Index.vue"),
      },
    ],
  },
];