javascript 开发语言 ecmascript 前端 vue3+axios+router实现页面跳转及登录

本篇文章主要是，使用 vite 创建一个vue3 书籍商城的小型案例，项目中主要运用到路由router及接口axios等知识点。

1.开始搭建项目框架，使用vite来构建项目

npm create vite@latest

2.由于vite构建的项目中需要自己手动下载路由以及创建路由文件夹，所以在创建好的项目文档中找到src文件夹，在src文件夹下创建router文件夹，并且在其下创建index文件，对于index文件中要写的内容如下，在此之前还需要创建一个views文件夹，本次项目主要用到三个页面，所以需要在views文件夹下需创建三个文件，包括HomeView.vue、AboutView.vue、UserLoginView.vue。这些准备好之后还有重要的一点就是手动安装router。

npm install vue-router//终端中安装router

index.js文件中的内容：

import { createRouter, createWebHashHistory } from "vue-router";

import HomeView from "../views/HomeView.vue";

const routes = [

{//首页

path: "/",

name: "home",

component: HomeView,

},

{//书籍商城

path: "/about",

name: "about",

component: () =>

import( "../views/AboutView.vue"),

},

{//登录页

path: "/userlogin",

name: "userlogin",

component: () =>

import("../views/UserLoginView.vue"),

},

];

const router = createRouter({

history: createWebHashHistory(),

routes,

});

export default router;

3.上述内容完成之后，还需要在main.js中引入router，不然会报错，以及在app.vue中需要撰写跳转过程。

import router from "./router";

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

4.接下来就是书写每个页面的代码，首先是首页，首页中未涉及过于复杂的过程，只是一个单纯的静态页面。

 首页效果图：

5.其次是书籍商城页面，本页面中由于查询之后会展示相应的书籍，所以涉及到了接口问题，还需要另外自己手动下载接口，对于接口文档是借用小说搜索 - LRY_API这个网站的。

npm install axios --save//在终端中下载接口

 书籍商城效果图：

6.最后就是登录界面，登录界面功能要相对复杂一些，在登录界面中点击其他界面是禁止的，同时在登录之后会跳转到书籍商城界面，内容如下：

 登录效果图：

7.最后来看看实际效果吧

书籍商城案例

相关阅读

 您阅读本篇文章共花了：