项目路由配置

安装 vue-router

vue-router 更多使用详情查看：官方文档

npm install vue-router@4

项目路由配置文件夹结构

主要为路由规则 和 页面视图：

project root/
    |-- src/
        |-- router/
            |-- index.ts
            |-- routes.ts  // 常量路由
        |-- views/
            |-- 404/
                |-- index.vue
            |-- home/
                |-- index.vue
            |-- login/
                |-- index.uve

index.ts 路由规则

// @/router/index.ts

// 通过vue-router 插件实现模板路由配置

import { createRouter, createWebHashHistory } from 'vue-router'
// 引入常量路由
import { constantRoute } from './routes'
// 创建路由器
let router = createRouter({
    // 路由模式 hash
    history: createWebHashHistory(),
    // 下面为拆分后的使用
    routes: constantRoute,
    // 滚动行为
    scrollBehavior() {
        return {
            left: 0,
            top: 0,
        }
    },
})

export default router

通过拆分文件，让其不臃肿好维护

// @/router/routes.ts
// 对外暴露配置的路由
export const constantRoute = [
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
    },
    {
        // 登录成功后的路由
        path: '/',
        component: () => import('@/views/home/index.vue'),
        name: 'layout',
    },
    {
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404',
    },
    {
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'Any',
    },
]

注册路由

在main.ts 中注册路由：

// main.ts

// 引入路由
import router from './router'
// 注册模板路由
app.use(router)

使用路由

举例在 App.vue 中使用路由：

<template>
    <div>
        <h1>svg 测试</h1>
        <!-- 使用路由 -->
        <router-view></router-view>
    </div>
</template>
<script lang="ts" setup></script>

<style scoped lang="scss">
div {
    h1 {
        color: $color;
    }
}
</style>