vue3使用vue-router构建SPA

使用自动化构建工具vite搭建新项目

#某个目录下执行
npm create vite@latest

 按照提示初始化项目，并按照提示：

cd vite-project
npm install
npm run dev

生成目录结构如下：

  安装常用的类库

npm install vue-router --save 
npm install axios --save 
npm install bootstrap --save

定义路由

新建src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../pages/Home.vue";

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "home",
            component: Home,
        },
        {
            path: "/reg",
            name: "reg",
            component: () => import("../pages/Reg.vue"),
        },
        {
            path: "/login",
            name: "login",
            component: () => import("../pages/Login.vue"),
        },
    ],
});
export default router;

 修改main.js

import router from "./router";

createApp(App).use(router).mount("#app");

 使用vue-router组件

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

修改App.vue

<script setup>
import "bootstrap/dist/css/bootstrap.min.css";
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Eleventh navbar example">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">LOGO</a>

        <div class="collapse navbar-collapse">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <RouterLink to="/" class="nav-link active">Home</RouterLink>
            </li>
          </ul>

          <ul class="navbar-nav ms-auto mb-2">
            <li class="nav-item">
              <RouterLink to="/reg" class="nav-link ms-3">Register</RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink to="/login" class="nav-link ms-3">Login</RouterLink>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <RouterView />
  </div>
</template>
<style>
a {
  cursor: pointer;
}
</style>

 src/pages/Home.vue

<template>
  <div class="about">
    <h1>This is home page</h1>
  </div>
</template>

 src/pages/Login.vue

<script setup>
import axios from "axios";
function login() {
  const formData = new FormData(document.getElementById("loginForm"));
  axios.post("/login", formData).then(function (response) {
    
  });
}
</script>
<template>
  <div >
    <div class="row">
      <div class="col-8 mx-auto" style="margin-top: 4rem">
        <div class="card p-5">
          <form id="loginForm">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="floatingInput" name="email" placeholder="Email" />
              <label for="floatingInput">Email</label>
            </div>
            <div class="form-floating">
              <input type="password" class="form-control" id="floatingPassword" name="password" placeholder="Password" />
              <label for="floatingPassword">Password</label>
            </div>
            <div class="mt-3 text-center">
              <input type="button" class="btn btn-primary" value="login" v-on:click="login()" />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

 src/pages/Reg.vue

<script setup>
import axios from "axios";
function reg() {
  const formData = new FormData(document.getElementById("regForm"));
    axios.post("/register", formData).then(function (response) {
      
    });
 }
</script>
<template>
  <div >
    <div class="row">
      <div class="col-8 mx-auto" style="margin-top: 10rem">
        <div class="card p-5">
          <form id="regForm">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="floatingInput" name="name" placeholder="Name" required />
              <label for="floatingInput">Name</label>
            </div>
            <div class="form-floating mb-3">
              <input type="eamil" class="form-control" id="floatingInput" name="email" placeholder="Email" required />
              <label for="floatingInput">Email</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="floatingPassword" name="password" placeholder="Password" required />
              <label for="floatingPassword">Password</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="floatingPassword" name="password_confirmation" placeholder="password confirmation" required />
              <label for="floatingPassword">Password</label>
            </div>
            <div class="input-group text-center">
              <input type="button" class="btn btn-primary" value="register" v-on:click="reg()" />
              <a class="ms-3" href="index.html">已有账号？去登录</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>