Vue3 使用route手写面包屑导航组件

最新推荐文章于 2024-08-22 13:36:33 发布

ZJEEMO

最新推荐文章于 2024-08-22 13:36:33 发布

阅读量3.6k

点赞数 2

分类专栏： vue3 文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_39279706/article/details/111192706

版权

本文介绍如何在Vue3中利用route手写面包屑导航组件，详细阐述了vue3 router的官方文档，强调了在vue3中使用route和watch的注意事项，并提供了router配置、HTML及JS部分的实现细节，特别是如何通过watch监听和更新路由信息。

摘要由CSDN通过智能技术生成

Vue3.0 使用route手写面包屑导航组件

如图，实现一个点击左侧菜单后，右侧面包屑导航随之变化的功能。
在这里插入图片描述

vue3 router 官方英文文档

vue3 router API 移步: https://next.router.vuejs.org/

一些需要注意的点

route
在vue3中，route不可直接使用，需要引入useRoute，再用一个变量去接收。

// script 引入useRoute
   import {useRoute} from 'vue-router';

//setup 中接收route
  const route = useRoute();

watch
在vue3中，watch可以存在多个，也可以合并。文中只监听了一个数据，故只使用了一个watch。

 // watch()中可以放置两个参数，第一个参数放入被监听数据，第二个参数放入回调函数用来进行数据操作
   watch(()=>route.matched,(newVal,oldVal)=>{
     // xxx= newVal;
   })

router部分

为每一个路由配置一个meta:{title:" xxx"}

//index.js
import {
    createRouter, createWebHashHistory } from "vue-router";
const routes = [
  {
   
    path: "/index",
    name: "index",
    meta: {
   
      title: '主页'
    },
    redirect: '/main',
    component: () => import(/* webpackChunkName: "index" */ "../views/layout/index.vue"),
    children: [
      {
   
        path: "/main",
        name: "main",
        meta: