当前位置：首页 > article >正文

前端路由如何从0开始配置？vue-router 的使用

article 2024/11/5 13:46:35

在 Web 开发中，路由是指根据 URL 的不同部分将请求分发到不同的处理函数或页面的过程。路由是单页应用（SPA, Single Page Application）和服务器端渲染（SSR, Server-Side Rendering）应用中的一个重要概念。

在开发中如何去配置路由呢？

1、先安装对应的依赖包

npm add vue-router

在这里插入图片描述

2. 创建页面文件

创建布局页面 src\views\layout\index.vue
创建登录页面 src\views\login\index.vue

在这里插入图片描述

3. 创建路由

router/index.ts

import { createRouter, createMemoryHistory } from "vue-router";
import Layout from "@/views/layout/index.vue";

// 创建一个路由器实例
const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    {
        path: '/',
        component: Layout
    },
    {
        path: '/login',
        component: () => import('@/views/login/index.vue')
    }
  ],
});

export default router

配置对象中设置了 history 为 createMemoryHistory()，这意味着路由将在内存中管理，不依赖于浏览器的历史记录。

4. 导入使用

在main.ts中导入即可

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import "normalize.css";
import "@/styles/common.less";
import router from '@/router/index'

// 创建实例 app
const app = createApp(App)
// 挂载到 app
app.mount("#app");
// 在 app 安装插件 router
app.use(router)

推荐一个组件npm add vite-plugin-vue-setup-extend -D

vite-plugin-vue-setup-extend是一个 Vite 插件，旨在增强 Vue 3 的 <script setup> 语法。它提供了一些额外的功能和改进，以提高开发体验，特别是在使用 TypeScript 时。

它可以改善在 <script setup> 中定义的变量、函数和组件属性的 TypeScript 类型推断。
可以提供更好的自动补全支持，使得开发者可以在编辑器中更方便地编写代码。
允许在其他地方引用 <script setup> 中定义的组件，并且能够正确识别其类型。
通过生成 .d.ts 文件来暴露组件的类型信息，从而可以在项目中的其他地方导入并使用这些类型。
与 Vite 和 Vue 3 完美集成，可以与其他 Vite 插件和工具链无缝协作。