从零搭建Vue3+TypeScript高性能项目，手把手教你玩转嵌套路由与菜单栏

2022-11-23 11:06:58

Vue3 + TypeScript 实战：从零搭建嵌套路由和菜单栏

简介

Vue.js 和 TypeScript 是现代前端开发的强大组合。Vue.js 提供了一个易于使用且功能强大的框架，而 TypeScript 则增强了 JavaScript 的类型系统，提升了代码的可维护性和可重用性。本文将带你一步步搭建一个 Vue3 + TypeScript 项目，并实现嵌套路由和菜单栏。

1. 项目搭建

使用 Vue CLI 创建一个新项目：

vue create my-project

安装 TypeScript 支持：

npm install -D typescript @vue/cli-plugin-typescript

创建 main.ts 文件作为应用程序入口：

2. 路由配置

在 main.ts 中，配置路由：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

提示： createWebHistory() 创建了一个基于浏览器的历史记录，而 createMemoryHistory() 创建了一个基于内存的历史记录。

3. 嵌套路由

要实现嵌套路由，请在 main.ts 中添加以下代码：

{
  path: '/parent',
  name: 'Parent',
  component: Parent,
  children: [
    {
      path: 'child1',
      name: 'Child1',
      component: Child1,
    },
    {
      path: 'child2',
      name: 'Child2',
      component: Child2,
    },
  ],
}

4. 菜单栏

在 App.vue 中，实现菜单栏：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/parent">Parent</router-link>
  </nav>
  <router-view/>
</template>