router路由的配置
- App.vue
- router
- 在main.ts引入插件
App.vue
<template>
<RouterView />
</template>
<script setup lang="ts"></script>
<style scoped lang="scss"></style>
router
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/login/LoginView.vue'
import Main from '@/views/main/MainView.vue'
import NotFound from '@/views/not-found/NotFound.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'layout',
redirect: '/home',
},
{
path: '/home',
name: 'main',
component: Main,
},
{
path: '/login',
name: 'login',
component: Login,
},
{
path: '/404',
name: '404',
component: NotFound,
},
{
path: '/:pathMatch(.*)*',
redirect: '/404',
name: 'any',
},
],
})
export default route
在main.ts引入插件
import router from './router'
app.use(router)
