3、路由vue-router（从0开始练习Vue3+Vite+Ts）

安装vue-router

npm install vue-router

新建几个页面用来做测试
在 /src/views 文件夹下创建 home、login文件夹，并在其中创建 index.vue文件

在/src/views/home/index.vue 中写

<template>
    <div>
        <h1>首页</h1>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'HomeIndex' // 修改组件名称
})
</script>

<style scoped>
/* 你的样式代码 */
</style>

在/src/views/login/index.vue 中写

<template>
    <div>
        <h1>登录</h1>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'LoginIndex' // 修改组件名称
})
</script>

<style scoped>
/* 你的样式代码 */
</style>

接下来，在 src 文件夹下创建一个 router 文件夹，然后在 router 文件夹中创建 index.ts 和 modules文件夹，并创建模块化的 ts 文件，并填入对应的代码

在 /modules/login.ts文件中，写入如下代码：

export default [
    {
        path: '/login',
        name: 'loginIndex',
        component: () => import('@/views/login/index.vue'),
        meta: {
            title: '登录页'
        }
    }
]

/src/router/inde.ts 文件，这样写：

import type { App } from 'vue'
// 引入 login.ts
import LoginRouter from './modules/login'
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

export const publicRoutes: Array<RouteRecordRaw> = [
    ...LoginRouter,
    {
        path: '/',
        name: 'HomeIndex',
        component: () => import('@/views/home/index.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes: publicRoutes
})

/* 初始化路由表 */
export function resetRouter() {
    router.getRoutes().forEach((route) => {
        const { name } = route
        if (name) {
            router.hasRoute(name) && router.removeRoute(name)
        }
    })
}
/* 导出 setupRouter */
export const setupRouter = (app: App<Element>) => {
    app.use(router)
}

调整main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

const app = createApp(App)
// 引入我们导出的 router
import { setupRouter } from '@/router'

const setupApp = async () => {
    const app = createApp(App)
    // 创建路由
    setupRouter(app)
    app.mount('#app')
}

setupApp()

在App.vue里写个<router-view />试试效果

这时候刷新项目就会显示

路径后加login就会显示

进度条

安装 nprogress
npm install nprogress --save

封装 utils
在 src 下新建 utils 文件夹，在 utils 文件夹下新建 nprogress.ts 文件
写如下代码：

// /src/utils/nprogress.ts
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

//全局进度条的配置
NProgress.configure({
    easing: 'ease', // 动画方式
    speed: 300, // 递增进度条的速度
    showSpinner: false, // 是否显示加载ico
    trickleSpeed: 200, // 自动递增间隔
    minimum: 0.3, // 更改启动时使用的最小百分比
    parent: 'body' //指定进度条的父容器
});

// 打开进度条
export const start = () => {
    NProgress.start();
};

// 关闭进度条
export const close = () => {
    NProgress.done();
};

结合路由守卫使用，编辑/src/router/index.ts

import type { App } from 'vue'
// 引入 nprogress 相关方法
import { close, start } from '@/utils/nprogress';
// 引入 login.ts
import LoginRouter from './modules/login'
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

export const publicRoutes: Array<RouteRecordRaw> = [
    ...LoginRouter,
    {
        path: '/',
        name: 'HomeIndex',
        component: () => import('@/views/home/index.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes: publicRoutes
})

// 路由前置后卫
router.beforeEach(() => {
    // 开启进度条
    start()
})

// 路由后置后卫
router.afterEach(() => {
    // 关闭进度条
    close()
})

/* 初始化路由表 */
export function resetRouter() {
    router.getRoutes().forEach((route) => {
        const { name } = route
        if (name) {
            router.hasRoute(name) && router.removeRoute(name)
        }
    })
}
export default router
/* 导出 setupRouter */
export const setupRouter = (app: App<Element>) => {
    app.use(router)
}

很成功，我真是个天才！

效果如下：