Vue プロジェクトのルーティング設計とページ レベルの設計は、開発の非常に重要な部分です。これら 2 つの側面を設計することで、ページの深いネストとカバーの問題を効果的に軽減し、ユーザー エクスペリエンスと開発効率を向上させることができます。次回のブログでは、これら 2 つの側面を、検査ポイント、技術的解決策 (コード例)、まとめの 3 つの観点から検討していきます。
1. 点検ポイント
Vue プロジェクトでルーティングとページ レベルを設計するときは、次の問題を考慮する必要があります。
ページレベルのネストが深すぎると、ユーザーエクスペリエンスに影響しますか?
ポップアップ ウィンドウ内のコンポーネントが互いに重なってしまう問題を回避するにはどうすればよいですか?
ルーティング設計が合理的で、保守と拡張が容易であることを保証するにはどうすればよいでしょうか?
2. 技術的解決策
上記の問題を解決するには、次の技術的解決策を採用できます。
ルーティング設計
Vue プロジェクトのルーティング設計は、次の原則に従う必要があります。
ネストされたルーティングを使用する: ページ レベルの深いネストの問題を最小限に抑え、ネストされた関係をネストされたルーティングに変換します。合理的なルーティング構造を設計します。ビジネス機能またはモジュールに従ってルートを分割し、メンテナンス
と拡張を容易にするために合理的にルーティング構造を設計します。ルートの遅延ロードを使用します。ページのロードを高速化し、ユーザー エクスペリエンスを向上させるためにルートの遅延ロードを使用します。ルーティング インターセプト: ルーティング インターセプト メカニズムにより、権限制御やログイン検証などの機能を実現でき
ます
。
サンプルコードは次のとおりです。
ルーティング設定用にルーターフォルダーに新しいindex.jsファイルを作成します。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [{
path: '/',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
component: () => import('@/views/About.vue')
},
{
path: '/user/',
component: () => import('@/views/user/Index.vue'),
children: [{
path: '',
component: () => import('@/views/user/List.vue')
},
{
path: 'profile',
component: () => import('@/views/user/Profile.vue')
},
{
path: 'setting',
component: () => import('@/views/user/Setting.vue')
}
]
}
]
})
// 路由拦截
router.beforeEach((to, from, next) => {
// 登录验证
if (to.path.startsWith('/user') && !sessionStorage.getItem('token')) {
next('/')
} else {
next()
}
})
export default router
ページ階層設計
ページ階層の設計は、次の原則に従う必要があります。
Z インデックスによるレベルの設定は避けるようにしてください。レベルの問題は、DOM ツリー内のコンポーネントの位置を調整することで解決できます。ポップアップ ウィンドウ コンポーネント内で絶対位置レイアウトが使用され、内部コンポーネントがポップアップ ウィンドウを基準にして配置されるようになります。Vue のポータル テクノロジを使用すると、コンポーネントを指定された DOM ツリー ノードに挿入してレンダリングでき
ます
。
サンプルコードは次のとおりです。
App.vue ファイルのページ レベルのデザイン
<template>
<div id="app">
<!-- 网站头部 -->
<Header />
<!-- 应用主体区域 -->
<main>
<!-- 路由视图 -->
<router-view />
<!-- 弹窗组件 -->
<Dialog :visible="dialogVisible">
<component :is="dialogComponent" />
</Dialog>
</main>
<!-- 网站底部 -->
<Footer />
<!-- 将弹窗组件插入到body节点中方便渲染 -->
<portal to="body">
<div id="dialog"></div>
</portal>
</div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Dialog from "@/components/Dialog";
export default {
name: "App",
components: {
Header,
Footer,
Dialog
},
data() {
return {
dialogVisible: false,
dialogComponent: null
};
},
methods: {
showDialog(component) {
this.dialogComponent = component;
this.dialogVisible = true;
},
hideDialog() {
this.dialogVisible = false;
this.dialogComponent = null;
}
}
};
</script>
3. まとめ
ルーティング設計とページ レベルの設計は、Vue プロジェクト開発の非常に重要な部分です。これら 2 つの側面を設計することで、ページの深いネストとカバーの問題を効果的に軽減し、ユーザー エクスペリエンスと開発効率を向上させることができます。ネストされたルーティング、ルーティングの遅延読み込み、ルーティング インターセプトなどの技術的ソリューションを使用して、ルーティング設計の問題を解決できます。Vue のポータル テクノロジ、ポップアップ コンポーネント内の絶対配置レイアウト、およびページ レベルの設計問題を解決するその他のソリューションを使用できます。このブログがお役に立てば幸いです。