Vite2+Vue3学习笔记（二）：引入Vue-Router

目录

前言

项目码云Gitea地址

其他文章

二、引入Vue-Router

1.安装Vue-Router

 package.json

2.准备视图页面

src/App.vue

src/components/Login.vue

 运行项目

 3.Vue-Router配置文件

src/router/index.js

4.项目入口文件引入Vue-Router

src/main.js

5.完善路由配置

---

前言

        本人职场小白，公司让学习Vite和Vue3并搭建项目Demo，借这个机会自己尝试写写博客，主要目的是搭项目，所以原理性的知识没有过多阐述，写博客时也根据步骤复现了，对于新手直接跟着操作就可以把项目搭起来，少走了很多弯路，希望对大家有帮助。

        文中参考链接都有附上，参考时可以看看，如果有任何错误或意见也欢迎大家指点。

项目码云Gitea地址

Vite-Demo: 使用vite2.0及vue3.0并集成Element Plus，开发后台管理系统demo。https://gitee.com/YG-CST/vite-demo

其他文章

Vite2+Vue3学习笔记（一）：Vue3.0项目搭建及配置过程_YGいくこさん的博客-CSDN博客

二、引入Vue-Router

官网：安装 | Vue Router

1.安装Vue-Router

普通版：npm i vue-router

最新版：npm i vue-router@next

推荐安装最新版。

•  package.json

{
  "name": "test-demo-1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "element-plus": "^1.2.0-beta.3",
    "sass": "^1.43.5",
    "scss": "^0.2.4",
    "vue": "^3.2.16",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.4"
  }
}

2.准备视图页面

• src/App.vue

<template>
  <div class="container">
    <router-view></router-view>
  </div>
</template>

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import HelloWorld from "./components/HelloWorld.vue";
</script>

<style>
* {
  margin: 0;
  border: 0;
  padding: 0;
}
body {
  background-color: #f0f2f5;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.container {
  margin: 0 auto;
  text-align: center;
}
</style>

• src/components/Login.vue

<template>
  <div style="padding: 50px 0 0">
    <img src="../assets/logo.png" alt="" />
    <h1 style="font-size: 50px; font-weight: bolder">Vite-Demo</h1>
  </div>
  <el-form
    ref="loginForm"
    :model="loginForm"
    :rules="rules"
    label-width="80px"
    class="login"
    @keyup.enter.native="submitForm('loginForm')"
  >
    <el-form-item label="帐号" prop="email">
      <el-input v-model="loginForm.email"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="loginForm.password" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
      <el-button @click="resetForm('loginForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        email: "",
        password: "",
      },
      rules: {
        email: [
          {
            required: true,
            message: "Please input email address",
            trigger: "blur",
          },
          {
            type: "email",
            message: "Please input correct email address",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "Please input password",
            trigger: "blur",
          },
          {
            min: 12,
            max: 30,
            message: "Length should be 12 to 30",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        	this.$message.success("Login successfully! Welcome!");
          	this.$router.push("/"); // HelloWorld.vue在路由配置文件中定义的路径
        } else {
           return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
.login {
  width: 500px;
  background-color: #ffffff;
  border-radius: 10px;
  margin: 50px auto;
  padding: 50px;
  box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.1);
}
h1 {
  color: var(--el-color-primary);
}
</style>

 运行项目

 3.Vue-Router配置文件

• src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
const routerHistory = createWebHistory();
const router = createRouter({
    history: routerHistory,
    routes: [{
            path: '/login',
            component: () =>
                import ("../components/Login.vue")
        }, {
            path: "/",
            component: () =>
                import ("../components/HelloWorld.vue")
        }
    ]
});

export default router;

4.项目入口文件引入Vue-Router

• src/main.js

// 引入Vue-Router
import Router from './router';

app.use(Router);

Login.vue输入账号密码后登录，自动跳转至HelloWord.vue。

5.完善路由配置

用户访问空路径时跳转首页：localhost:5000，

访问未定义路径时跳转404页面：localhost:5000/e。

const router = createRouter({
    history: routerHistory,
    routes: [{
        path: "/login",
        name: "login",
        component: () =>
            import ("../components/Login.vue")
    }, {
        path: "/", // 父级路径
        name: "main",
        component: () =>
            import ("../components/Main.vue"),
        children: [{
                path: "/", // 空路径路由的路径与父级路径保持一致，否则会显示Main.vue，没有渲染router-view
                redirect: "/appList"
            }, // 定义空路径，用户访问localhost:5000时跳转至首页
            {
                path: "/appList",
                name: "appList",
                component: () =>
                    import ("../views/AppList.vue")
            }
        ]
    }, {
        path: "/:pathMatch(.*)*",
        name: "notFound",
        component: () =>
            import ("../components/NotFound.vue")
    }]
});