Build front-end project 4 (Vue Router) from scratch

Build a lean front-end project step by step from scratch.

Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + AXIos + Pinia

Canonicalization: Eslint + Airbnb JavaScript Style + husky + Lint-staged

Package management: YARN

Historical content

Building front-end Project 1 from Scratch (Vue3+Vite+TS+Eslint+Airbnb+ Prettier)

Build Front-end Projects FROM Scratch HusKY + Lint-Staged

Build front-end project 3 (Element Plus) from scratch

This chapter content

Introduce the vue-router@4 front-end routing tool into the project.

Vue Router

The installation

First install vue-router@4

yarn add vue-router@4
Copy the code

configuration

Modify the 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>
Copy the code

In the SRC folder pages, create pages->stable->login-> loginPage. vue.

In the SRC folder pages, create pages->stable->notFound-> notFound. Vue.

The above is a sample page.

Create a folder in the SRC directory. Under router, create the index.ts file.

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;
Copy the code

LoginPage. Vue web page.

<template> <div> </template> <script setup lang="ts" name="Login"></script> <style scoped lang=" SCSS "></style>Copy the code

The NotFound. Vue page is similar.

<template> <div>404 page </div> </template> <script setup lang="ts" name="NotFound"></script> <style scoped lang="scss"></style>Copy the code

Introduced in main.ts.

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

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

run

Run the project

yarn dev
Copy the code

Programmatic navigation

Add a jump button on the loginPage. vue page.

<template> <div> <el-button @click="goNotFoundpage"> </el-button> </template> <script setup lang="ts" name="Login"> import { useRouter } from 'vue-router'; const router = useRouter(); const goNotFoundpage = () => { router.push({ name: 'notFound', }); }; </script>Copy the code

Click the button to jump to the page.

Subsequent logic

Router -> index_ts const routes: RouteRecordRaw[] = [] RouteRecordRaw[] Since most of the subsequent routes of the project are transmitted from the background to the front end, we can roughly divide them into three parts. The first is fixed route stableRouts, which consists of login page and exception page. 2 is mainRouts, which consists of the page header, sidebar, and content page. 3 is a dynamic route transmitted from the background to the front-end.

Finally, the three routes are combined to form a total route.

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

This idea is still under development and will be updated to this post.

Setup the name to enhance

Vue3’s setup syntax sugar is a good thing, but the first problem with using the setup syntax is the inability to customize names. You can fix this problem with the plugin-vue-plugin-vue-setup-extend plug-in.

The installation

Install vite – plugin – vue – setup – the extend

yarn add vite-plugin-vue-setup-extend --dev
Copy the code

configuration

Add the configuration in vite.config.ts

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

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

use

NotFound. Vue web page.

<template> <div>404 page </div> </template> <script setup lang="ts" name="NotFound"></script> <style scoped lang="scss"></style>Copy the code

summary

This paper introduces how to introduce Vue Router into the project and realize programmatic navigation. It also introduces the following implementation ideas of front-end routing in the project. The vite-plugin-vue-setup-extend plugin was introduced to help us name components.