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

HelloWorldZ

发布于 2024-03-20 19:12:13

870

发布于 2024-03-20 19:12:13

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

安装 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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-17，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript