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

一小池勺

已于 2024-03-17 22:08:26 修改

阅读量414

点赞数 7

文章标签： typescript javascript 开发语言

于 2024-03-17 22:02:58 首次发布

本文链接：https://blog.csdn.net/zrblue/article/details/136790232

版权

文章介绍了如何在Vue项目中安装和配置Vue-Router，包括创建路由器实例、使用webHashHistory、定义路由映射关系，以及在main.ts中挂载。作者提到配置过程让人感受到函数式编程的思路。

摘要由CSDN通过智能技术生成

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

安装 Vue-Router

npm install vue-router # router 属于是生产依赖

router/index.ts

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

在这里插入图片描述

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

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

export default router

在 main.ts 中挂载

const app = createApp(App)
app.use(router)
app.mount('#app')

初步配置映射关系

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