从零开始搭建前端项目四（Vue Router）

从零开始一步一步搭建一个精简的前端项目。

技术栈：Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + axios + Pinia

规范化：Eslint + Airbnb JavaScript Style + husky + lint-staged

包管理：yarn

历史内容

从零开始搭建前端项目一（Vue3+Vite+TS+Eslint+Airbnb+prettier）

从零开始搭建前端项目二（husky+lint-staged）

从零开始搭建前端项目三（Element Plus）

本章内容

在项目中引入vue-router@4前端路由工具。

Vue Router

安装

首先安装vue-router@4

yarn add vue-router@4

配置

修改App.vue

<template>
  <transition name="el-fade-in-linear"><router-view></router-view></transition>
</template>
<script lang="ts" name="App"></script>
<style lang="scss"></style>

在src目录下新建文件夹pages下，新建pages->stable->login->LoginPage.vue页面。

在src目录下新建文件夹pages下，新建pages->stable->notFound->NotFound.vue页面。

上述作为示例页面。

在src目录下新建文件夹router下，新建index.ts文件。

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const stableRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/login',
  },
  {
    path: '/login',
    name: 'login',
    component: () =>
      import(
        /* webpackChunkName: "index" */ '@/pages/stable/login/LoginPage.vue'
      ),
  },
  {
    path: '/notFound',
    name: 'notFound',
    component: () =>
      import(
        /* webpackChunkName: "index" */ '@/pages/stable/notFound/NotFound.vue'
      ),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes: stableRoutes,
});

export default router;

LoginPage.vue页面。

<template>
  <div>登录页面</div>
</template>
<script setup lang="ts" name="Login"></script>
<style scoped lang="scss"></style>

NotFound.vue页面类似。

<template>
  <div>404页面</div>
</template>
<script setup lang="ts" name="NotFound"></script>
<style scoped lang="scss"></style>

在main.ts中引入。

import App from './App.vue';
import router from './router';     // ++

createApp(App)
  .use(ElementPlus, { zhCn, size: 'small' })
  .use(router)                    // ++
  .mount('#app');

运行

运行项目

yarn dev

编程式导航

在LoginPage.vue页面添加跳转按钮。

<template>
  <div>登录页面</div>
  <el-button @click="goNotFoundpage">跳转404页面</el-button>
</template>
<script setup lang="ts" name="Login">
import { useRouter } from 'vue-router';

const router = useRouter();
const goNotFoundpage = () => {
  router.push({
    name: 'notFound',
  });
};
</script>

点击按钮跳转页面。

后续逻辑

目前还是vue-router的基本使用，可以看到router->index.ts中我并没有使用常用的const routes: RouteRecordRaw[] = []。因为项目后续的大部分路由是由后台传到前端，所以我们大概分成3部分，1是固定路由stableRouts，由登录页和异常页组成。2是mainRouts，由页面的头部，侧边栏和内容页组成。3是dynamicRouts，由后台传到前端的动态路由。

最后在生成路由时，将三者合并形成总路由。

// router->index.ts
const router = createRouter({
  history: createWebHistory(),
  routes: stableRoutes.concat(mainRouts, dynamicRouts)    // edit
});

这个思路目前还在开发中，后续会更新这篇文章。

setup name 增强

Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，解决这个问题可以借助插件vite-plugin-vue-setup-extend。

安装

安装vite-plugin-vue-setup-extend

yarn add vite-plugin-vue-setup-extend --dev

配置

在vite.config.ts中添加配置

// vite.config.ts
import VueSetupExtend from 'vite-plugin-vue-setup-extend'    // ++

export default {
  plugins: [
    // ...
    VueSetupExtend(),        // ++
  ],
}

使用

NotFound.vue页面。

<template>
  <div>404页面</div>
</template>
<script setup lang="ts" name="NotFound"></script>
<style scoped lang="scss"></style>

小结

本篇介绍了如何将Vue Router引入项目，并实现编程式导航，介绍了项目关于前端路由的后续实现思路。介绍了vite-plugin-vue-setup-extend插件，帮助我们命名组件。