vue3實現(xiàn)動態(tài)添加路由
更新時間：2024年04月25日 11:14:59 作者：m0_74019046
這篇文章主要介紹了vue3實現(xiàn)動態(tài)添加路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
動態(tài)路由的設置
1.登入后獲取后端返回的路由，并存入localStorage中
const menu = [
{
id: "1",
name: "系統(tǒng)總攬",
type: 1,
url: "/main/1",
icon: "el-icon-ship",
children: [
{ id: "11", name: "1111", type: 1, url: "/main/first/1", icon: "" },
{ id: "12", name: "33", type: 1, url: "/main/first/2", icon: "" }
]
},
{
id: "2",
name: "系統(tǒng)管理",
type: 1,
url: "/main/4",
icon: "el-icon-moon",
children: [
{ id: "21", name: "系統(tǒng)xx", type: 1, url: "/main/two/1", icon: "" },
{ id: "22", name: "系統(tǒng)11", type: 1, url: "/main/two/2", icon: "" }
]
},
{
id: "3",
name: "商品中心",
type: 1,
url: "/main/7",
icon: "el-icon-lightning",
children: [
{
id: "31",
name: "系統(tǒng)zz",
type: 1,
url: "/main/three/1",
icon: ""
},
{
id: "32",
name: "系統(tǒng)cc",
type: 1,
url: "/main/three/2",
icon: ""
}
]
},
{
id: "8",
name: "ad",
type: 1,
url: "/main/8",
icon: "el-icon-goods",
children: [
{ id: "9", name: "qqq", type: 1, url: "/main/four/1", icon: "" },
{ id: "10", name: "打算", type: 1, url: "/main/four/2", icon: "" }
]
}
]
// 存入pinia中
this.userMenu = menu
//封裝的localStorage
localCache.setCache("userMenu", menu)
2.獲取本地的路由文件
function getlocalRoute(){
//routerRoute本地路由
const routerRoute: RouteRecordRaw[] = []
// 1.獲取 router/xx/xx.ts文件 import.meta.glob() vite提供的
const route: Record<string, any> = import.meta.glob(
"../../router/**/*.ts",
{ eager: true }
)
//2.把所有的路由添加到routerRoute中
for (const key in route) {
const module = route[key]
console.log(module)
routerRoute.push(module.default)
}
return routerRoute
}
通過 import.meta.glob() 導入的路由
default就是路由對象
routerRoute：
3. 添加路由
let isFirst = true
function (userMenu:any){
//本地路由
const localRoute = getlocalRoute()
const routes:RouteRecordRaw[] = []
// 匹配路由
for(const menu of userMenu){
for(const subMenu of menu.children ){
//匹配到的子路由
//route的結(jié)構(gòu)：{path: '/main/first/1', component: ?}
const route = localRoute.find((item) => item.path == subMenu.url)
// 記錄第一個路由，進入主頁后會跳轉(zhuǎn)到這個路由
if(route && isFirst){
isFirst = false
// 封裝的 localStorage
localCache.setCache("first", myRoute)
}
if(route){
//給1級路由重定向到它的第一個子路由（只需要添加1次）
//如果 routerRoute里沒有加過1級路由的話就需要添加1級路由，并重定向到他的第一個路由
if(!routes.find((item) => item.path == menu.url)){
// 這里的redirect:不能是 menu.children[0],有可能它沒有第一個子路由的權(quán)限
routes.push({ path:menu.url, redirect: route .path })
}
// 添加路由
routes.push(route)
}
}
}
return routes
}
//最終再添加到main下：
router.addRoute("main", routes)
因為獲取本地的路由文件刷新后會消失，在pinia中設置一個方法用來在頁面刷新后重新加載路由loadLocal 具體操作和上面添加路由的方式相同。
刷新頁面后，會重新加載 pinia， 在pinia加載完后再加載本地數(shù)據(jù)，添加路由
import { createPinia } from "pinia"
import useLoginStore from "./login/index"
import type { App } from "vue"
const pinia = createPinia()
function store(app: App<Element>) {
//pinia加載完后才能使用store里面state、action和getters
app.use(pinia)
//pinia加載完后 加載本地數(shù)據(jù)，添加路由
const login = useLoginStore()
login.loadLocal()
}
export default store
面包屑的使用
<div class="home">
<el-breadcrumb :separator-icon="ArrowRight">
<template v-for="item in menuList" :key="item.name">
<el-breadcrumb-item :to="item.path">{{ item.name }}</el-breadcrumb-item>
</template>
</el-breadcrumb>
</div>
<script setup lang="ts">
const store = useLoginStore()
const route = useRoute()
const fun = () => {
const list: any[] = []
for (let menu of store.userMenu) {
for (let child of menu.children) {
// 獲取面包屑路由，并添加路由
//當前點擊的路由== 子路由
if (child.url == route.path) {
console.log(child.url)
// 1級路由，之前注冊時設置1級路由會重定向到它的第一個子路由
list.push({ name: menu.name, path: menu.url })
//子路由 當前點擊的路由
list.push({ name: child.name, path: child.url })
}
}
}
//list [1級路由，子路由]
return list
}
// 當點擊的路由變化時會匹配新的面包屑的路由
const menuList = computed(() => {
return fun()
})
</script>
路由的高亮
<div class="main-menu">
<el-row class="tac">
<el-col>
<el-menu
:default-active="defaultActive"
class="el-menu-vertical-demo"
:unique-opened="true"
>
<template v-for="item in menu" :key="item.id">
<el-sub-menu :index="item.id + ''">
<template #title>
<el-icon
><component :is="item.icon.split('-icon-')[1]"
/></el-icon>
<span>{{ item.name }}</span>
</template>
<template v-for="child in item.children" :key="child.id">
<el-menu-item-group>
<el-menu-item :index="child.id" @click="cli(child)">{{
child.name
}}</el-menu-item>
</el-menu-item-group>
</template>
</el-sub-menu>
</template>
</el-menu>
</el-col>
</el-row>
</div>
//拿到所有路由
const loginStore = useloginStore()
const menu = loginStore.userMenu
//當前進入頁面的路由
const route = useRoute()
// 點擊對應的菜單或輸入路徑后，對應的路由要高亮
const active = () => {
for (const item of loginStore.userMenu) {
console.log(route.path)
for (const child of item.children) {
//子路由 == 用戶輸入的路由
if (child.url === route.path) {
console.log(child.id)
return child.id + ""
}
}
}
// 返回的默認路由
return "11"
}
let defaultActive = computed(() => {
const defaults = active()
return defaults
})
封裝模塊
配置項
const searchconfig = {
formItems: [
{ type: "input", prop: "name", label: "部門名稱", placeholder: "xxx" },
{ type: "date-picker", prop: "date", label: "時間", placeholder: "xxx" },
{ type: "input", prop: "leader", label: "領導", placeholder: "xxx" },
{
type: "select",
prop: "selects",
label: "選擇",
placeholder: "xxx",
options: [
{ label: "1", value: 1 },
{ label: "2", value: 2 }
]
}
]
}
export default searchconfig
遍歷配置項
<div class="home">;;
<div>
<pageSerach @search="cli" :searchConfig="searchRef"></pageSerach>
</div>
<div>
<pageContent :contentConfig="contentconfig">
<template #name="scope">
<span>xxx:{{ scope.row[scope.prop] }}</span>
</template>
<template #id="scope">
<span>xxx:{{ scope.row[scope.prop] }}</span>
</template>
</pageContent>
</div>
<div>
<pageBottom></pageBottom>
</div>
</div>
如果有些配置是從后端傳入的，例如option的value,可以這樣添加：
const searchRef = computed(() => {
// 從后端獲取option的值,再給 searchconfig 里的option添加值
console.log("xx")
searchconfig.formItems.forEach((item) => {
if (item.prop == "selects") {
item?.options?.push({ label: "3", value: 3 })
}
})
return searchconfig
})
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue單選按鈕,選中如何改變其當前按鈕顏色。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標經(jīng)過動畫的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事
這篇文章主要介紹了詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
最近在項目中需要對數(shù)據(jù)進行可視化處理,而眾所周知echarts是非常強大的插件,下面這篇文章主要給大家介紹了關于Vue使用echarts的完整步驟及解決各種報錯的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Vue路由傳參props解耦的三種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了使用github部署前端vue項目過程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
基于vue2.0的活動倒計時組件countdown(附源碼下載)
這是一款基于vue2.0的活動倒計時組件，可以使用服務端時間作為當前時間，在倒計時開始和結(jié)束時可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動倒計時組件countdown,需要的朋友可以參考下2018-10-10
用vue實現(xiàn)注冊頁效果?vue實現(xiàn)短信驗證碼登錄
這篇文章主要為大家詳細介紹了用vue實現(xiàn)注冊頁，短信驗證碼登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實現(xiàn)方法
VuePress是一個基于Vue的輕量級靜態(tài)網(wǎng)站生成器以及為編寫技術文檔而優(yōu)化的默認主題。這么文章給大家詳細介紹了vuepress 靜態(tài)網(wǎng)站生成器的方法，需要的朋友參考下吧2018-04-04
深入理解使用Vue實現(xiàn)Context-Menu的思考與總結(jié)
這篇文章主要介紹了使用Vue實現(xiàn)Context-Menu的思考與總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03