前面完成了项目的结构划分,也进行了样式的重置以及全局变量的配置,现在开始该项目的路由配置
- 安装
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