Vue3 使用route手寫麪包屑導航組件

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: {
          title: '首頁'
        },
        //component: () => import(/* webpackChunkName: "index" */ "../views/layout/home/main.vue")
        component: () => import(/* webpackChunkName: "index" */ "../views/layout/home/main.vue")
      },
      {
        path: "/stats",
        name: "stats",
        meta: {
          title: '數據統計'
        },
        component: () => import(/* webpackChunkName: "index" */ "../views/layout/stats/stats.vue")
      },
      {
        path: "/wms",
        name: "wms",
        meta: {
          title: '信息管理'
        },
        component: () => import(/* webpackChunkName: "index" */ "../views/layout/wms/wms.vue"),
        children: [
          {
            path: "/wms/list",
            name: "list",
            meta: {
              title: '列表展示'
            },
            component: () => import(/* webpackChunkName: "index" */ "../views/layout/wms/list.vue")
          },
          {
            path: "/wms/info",
            name: "info",
            meta: {
              title: '用戶統計'
            },
            component: () => import(/* webpackChunkName: "index" */ "../views/layout/wms/info.vue")
          },
        ]
      }
    ]
  },
];

Html部分

// An highlighted block
<template>
  <div class="breadcumb">
      <ul>
        <li >       
            <a v-for="(item,index) in list" :key="index">
              <router-link :to="{path:item.path}">{{item.meta.title}}
                <span v-if="index < list.length-1">/ </span> <!--避免在導航最後出現分割線-->
              </router-link>
            </a>     
        </li>
      </ul>
  </div>
</template>

Js部分

route.matched中的信息

• 定義一個數組list:[] 用來存放路由中的信息
• list數組中的數據不會在點擊菜單後自動變化，需要用watch監聽數組變化並更新數據

/ An highlighted block
<script>
import { reactive, toRefs, onMounted,watch } from "vue";
import {useRoute} from 'vue-router';
export default {
  setup() {
    //data
    const route = useRoute();
    const state = reactive({
     list:[]
    });
    
    //onMounted
    onMounted(()=>{
      let matched = route.matched;//獲取菜單對應的路由信息
      state.list = matched;
    })
    
    //watch
    watch(()=>route.matched,(newVal,oldVal)=>{
      let matched = newVal;
      state.list = matched;//更新路由菜單數組
    })
    
    //return
    return {
      ...toRefs(state), //toRefs() 將數據變成響應式數據
    };
  }
};
</script>