一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して10日目です。クリックしてイベントの詳細をご覧ください。
動的にレンダリングされたナビゲーション
ルーティング方法：Hassiルーティング
router.tsファイルで、ルートを作成するときに、ハッシュルートに変更します。
const router = createRouter({
// 路由模式
history: createWebHashHistory(),
routes,
})
复制代码ハッシュ
vueでの使用方法
createWebHashHistory()
复制代码について学ぶ
ハッシュルーティングには＃のマークが付いています。これは、CSSの＃と同じ意味です。アンカーポイントとも呼ばれるハッシュは、ページの配置に使用されます。これにより、IDに対応する要素を表示領域（上部に戻るなど）に表示できます。
歴史
歴史の出現は、ハッシュの欠点のいくつかを改善することです。
vueでの使用方法
createWebHistory()
复制代码アドバンテージ
- ハッシュルートは元々アンカーに使用されていましたが、現在はナビゲーションに使用されているため、アンカーは使用できません。
- ハッシュはURL送信パラメーターに基づいており、ボリューム制限があります。履歴モードでは、パラメーターをURLに入れるだけでなく、特定のオブジェクトにデータを保存することもできます。
ルーターファイルの変更
import AppLayout from '@/layout/AppLayout.vue'
import { RouterView } from 'vue-router'
const manageRouter = // 管理端
{
path:'/manage',
component : AppLayout,
children:[
{
path:'/',
name:'home',
component:RouterView,
meta: { title: '首页', icon: 'Fold' },
},
{
path:'/user',
name:'用户管理',
component:RouterView,
children:[
{
path:'blacklist',
name:'黑名单管理',
component:()=>import('@/manage/UserManage/BlackList/BlackList.vue'),
}
]
},
{
path:'/dashboard',
name:'数据看板',
component:RouterView,
children:[
{
path:'pv',
name:'浏览量',
component:()=>import('@/manage/DashBoard/PV/PV.vue'),
}
]
}
]
}
export default manageRouter
复制代码1. RouterView：
下の図に示すように、ナビゲーションなどのユーザー管理に対応するページはありません。したがって、RouterViewをコンポーネント値として使用できます。
2.セカンダリメニュー：
セカンダリメニューのパスは使用されないことに注意してください/。上記のコンポーネントが存在しない場合は、2つの新しいコンポーネントを作成できます。効果を確認するだけです。
<template>
Pv
</template>
<script lang="ts" setup >
</script>
<style scoped lang="scss">
</style>
复制代码メニュー
manageRouterを導入する
トラバーサルに必要なデータとして、manageRouterを以前に作成したAppMenuコンポーネントに導入します。
import manageRouter from '@/router/manageRouter'
复制代码最初のデータを反復処理します
<template>最初にトラバースします。管理側とクライアント側を区別するため、外側/manageにレイヤーがあり、ナビゲーションバーのコンテンツはその子のコンテンツです。つまり、トラバースはmanageRouter.children
<el-menu
:collapse="props.isCollapse"
:collapse-transition="false"
@open="handleOpen"
@close="handleClose"
background-color="#ebf1f5"
text-color="#606266"
active-text-color="#2F74FF"
:unique-opened="true"
class="menu"
@select="handleSelect"
:default-active='selectKey'
router
>
<template v-for="(first,index) in manageRouter.children">
</template>
</el-menu>
复制代码さまざまなプライマリナビゲーションバー
1.1。
下の図に示すように、ホーム管理とユーザー管理はどちらも第1レベルのナビゲーションバーですが、同じではありません。ホームページはページに対応しており、ユーザー管理はサブメニューを展開するためにのみ使用されます。
<template v-for="(first,index) in manageRouter.children">
<el-sub-menu :index="first.path" v-if="first.children" :key="index" >
</el-sub-menu>
<el-menu-item v-else :index="first.path" :key="'item'+index">
<span>{{first.name}}</span>
</el-menu-item>
</template>
复制代码2.2。
ここで、v-ifとv-elseは、ナビゲーションが空かfirst.childrenどうかます。
el-menu-itemはサブメニューのないホームに使用され、el-sub-menuはサブメニューに使用されます。
3. :indexジャンプパスに対応していることに注意してください。
二次メニュー
<el-sub-menu :index="first.path" v-if="first.children" :key="index" >
<template v-if="first.children">
<el-menu-item-group v-for="(second,sec_index) in first.children" :key="sec_index">
<!--这个:index需要将上级菜单的路由组合一起-->
<el-menu-item :index="first.path+'/'+second.path"><i class="el-icon-odometer" />
{{second.name}}
</el-menu-item>
</el-menu-item-group>
</template>
<template #title>
<span>{{first.name}}</span>
</template>
</el-sub-menu>
复制代码区別
ユーザー管理とブラックリスト管理の両方el-sub-menuがあり、判断と区別も必要です。ユーザー管理では、タイトル名が直接表示されます。そしてブラックリスト管理、あなたは再びトラバースする必要があります。
背景色を選択
スタイルを追加
.menu .el-menu-item:hover {
background-color:#FFFFFF80;
}
.menu .el-menu-item.is-active{
background-color: #FFFFFF80!important;
color: #2f74ff !important;
}
复制代码アイコンの使用
アイコンもトラバースされるので、いくつかの方法を試しました。以下の方法が可能です。
アイコンをグローバルにマウントします
main.ts
ルートファイルが追加されました
アイコンを保存するために、ルーティングファイルにメタオブジェクトを追加します。
このHomeFilledは、公式ドキュメントアイコンの名前に対応しています
レンダリングアイコン
<el-icon><component :is="first.meta.icon"/></el-icon>
复制代码