【Vue3+TypeScript】CRM系统项目搭建之 — 路由配置

简介: 【Vue3+TypeScript】CRM系统项目搭建之 — 路由配置

前面完成了项目的结构划分,也进行了样式的重置以及全局变量的配置,现在开始该项目的路由配置

  1. 安装 Vue-Router
npm install vue-router # router 属于是生产依赖
  1. router/index.ts

越来越有函数式编程的感觉了

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

const router = createRouter({
  history: createWebHashHistory(),
  routes: []
})

export default router
  1. main.ts 中挂载
const app = createApp(App)
app.use(router)
app.mount('#app')
  1. 初步配置映射关系
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: '/main'
    },
    {
      path: '/login',
      component: () => import('../views/Login/index.vue')
    },
    {
      path: '/main',
      component: () => import('../views/Main/index.vue')
    },
    {
      path: '/:pathMatch(.*)',
      component: () => import('../views/NotFound/index.vue')
    }
  ]
})

export default router
目录
相关文章
|
3月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
1月前
|
JavaScript 前端开发 开发者
TypeScript :基本配置&数据的基本类型
本文介绍了TypeScript的安装、常见问题及解决方案、配置与使用方法。包括通过npm全局安装TypeScript、设置PowerShell执行策略、初始化项目、配置模块声明、处理数据类型等。详细步骤和代码示例帮助开发者快速上手。
|
1月前
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
|
1月前
|
存储 JavaScript 前端开发
TypeScript :使用mock提供数据&as const 的使用&tsconfig.json配置
本文介绍了如何在项目中使用 Mock 提供数据,包括安装依赖、配置 Vite 和 TypeScript,以及如何使用 `as const`、元组和 tsconfig.json 配置文件。通过这些配置,可以实现更灵活和高效的开发体验。
|
3月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
3月前
|
搜索推荐
实现CRM与ERP系统无缝集成,优化客户关系管理
在当今竞争激烈的市场环境中,企业要想保持领先地位,必须高效地管理客户关系并优化内部资源。CRM(客户关系管理)系统与ERP(企业资源规划)系统的无缝集成,为企业提供了一种强大的工具,以实现这一目标
67 2
|
3月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
46 3
|
3月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
132 0
|
3月前
|
监控 搜索推荐 数据管理
crm客户管理系统来帮助企业管理和提高运营效率
crm系统帮助企业简化销售流程,提高工作效率。CRM 客户管理系统确实能够在多个方面帮助企业管理和提高运营效率,具体表现如下:
34 3
|
4月前
|
监控 数据挖掘 数据安全/隐私保护
ERP系统中的客户关系管理(CRM)
【7月更文挑战第25天】 ERP系统中的客户关系管理(CRM)
372 3