vue3 用 v-slot 做一个导航

最新推荐文章于 2025-04-23 22:41:59 发布

凉爽爽爽爽爽爽爽爽爽

最新推荐文章于 2025-04-23 22:41:59 发布

阅读量747

点赞数

分类专栏： vue 笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_45770253/article/details/119235999

版权

本文介绍了使用 Vue3 的 v-slot 特性创建导航的过程。通过展示目录结构、路由配置及各个组件（App.vue, TabBar.vue, TabBarItem.vue, Home.vue, Category.vue, Cart.vue, Profile.vue）的详细说明，阐述了如何构建一个完整的导航系统。" 78906275,7411609,使用贪心算法解决均分纸牌问题,"['算法', '编程', 'C语言', '贪心策略']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下在这里插入图片描述

首先看我的目录结构（用的是 vue3）
在这里插入图片描述

路由的配置：

import {
    createRouter, createWebHistory } from "vue-router";

const Home = () => import("@/views/Home/Home");
const Category = () => import("@/views/Category/Category");
const ShopCart = () => import("@/views/ShopCart/ShopCart");
const Profile = () => import("@/views/Profile/Profile");

const routes = [
  {
   
    path: "",
    redirect: "/home",
  },
  {
   
    path: "/home",
    name: "Home",
    component: Home,
    meta: {
   
      title: "首页",
    },
  },
  {
   
    path: "/category",
    name: "Category",
    component: Category,
    meta: {
   
      title: "分类",
    },
  },
  {
   
    path: "/shopcart",
    name: "ShopCart",
    component: ShopCart,
    meta: {
   
      title: "购物车",
    },
  },
  {
   
    path: "/profile",
    name: "Profile",
    component: Profile,
    meta: {
   
      title: "个人主页",
    },
  },
];

const router = createRouter({
   
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

// 动态改变 title
router.beforeEach((to, from, next) => {
   
  document.title = to.meta.title;
  next();
}