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