Vue3+Ts+Vite プロジェクト (パート 5) - ルーティング ジャンプを実装し、ルーティングのモジュール化を完了するようにルーターを構成する

序文

• 私の技術スタック: Vue3 + Vite + TypeScirpt
• 私のパッケージ管理ツール: pnpm (v8.6.6)
• 私のnode.jsバージョン: v16.14.0

1.vue-routerをインストールする

pnpm install vue-router

---

2. ページを作成する

/src/views フォルダーの下に home、login、test フォルダーを作成し、その中にindex.vue ファイルを作成します。以下は、/src/views/login/

index.vue 内のコードです。テンプレートを記述するだけです。

<script lang="ts" setup></script>
<template>
  <div>
	<h1>这是home页面</h1>
  </div>
</template>

---

3.ルーターフォルダーを作成します

3.1 src フォルダーの下に router フォルダーを作成し、router フォルダー内にindex.ts フォルダーと modules フォルダーを作成します

3.2 modules フォルダーにモジュラー ts ファイルを作成し、対応するコードを記入します

ディレクトリ構造:

/modules/login.ts ファイルに次のコードを記述します。

export default [
  {
    
    
	path: '/login',
	name: 'loginIndex',
	component: () => import('@/views/login/index.vue'),
	meta: {
    
    
      title: '登录页'
	}
  }
];

/modules/test.ts ファイルに次のコードを記述します。

export default [
  {
    
    
	path: '/test',
	name: 'testIndex',
	component: () => import('@/views/test/index.vue'),
	meta: {
    
    
	  title: '测试页面'
	}
  }
];

3.3 /src/router/inde.ts ファイルを改善し、次のコードを記入します。

import type {
    
     App } from 'vue';
// 引入 login.ts
import LoginRouter from './modules/login';
// 引入 test.ts
import TestRouter from './modules/test';
import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

export const publicRoutes: Array<RouteRecordRaw> = [
	...LoginRouter,
	...TestRouter,
	{
    
    
		path: '/home',
		name: 'homeIndex',
		component: () => import('@/views/home/index.vue')
	}
];

const router = createRouter({
    
    
	history: createWebHashHistory(),
	routes: publicRoutes
});

/* 初始化路由表 */
export function resetRouter() {
    
    
	router.getRoutes().forEach((route) => {
    
    
		const {
    
     name } = route;
		if (name) {
    
    
			router.hasRoute(name) && router.removeRoute(name);
		}
	});
}
/* 导出 setupRouter */
export const setupRouter = (app: App<Element>) => {
    
    
	app.use(router);
};

---

4. main.ts での導入

import {
    
     createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
// 引入我们导出的 router 
import {
    
     setupRouter } from '@/router';

const setupApp = async () => {
    
    
  const app = createApp(App);
  // 创建路由
  setupRouter(app);
  app.mount('#app');
};

setupApp();

5. ルーティングのエクスポートを構成する

App.vue でルーティング出口を構成する

<script lang="ts" setup></script>
<template>
	<div>
		<!-- 配置路由出口 -->
		<router-view />
	</div>
</template>

6. 構成が成功したかどうかをテストする

アドレスバーに別のアドレスを入力すると別のページに切り替わることがわかります。これで vue-router の設定が完了し、モジュール化が完了します。

---

---

---