vue3+axios+router实现页面跳转及登录

本篇文章主要是，使用 vite 创建一个vue3 册本商城的小型案例，项目中主要运用到路由router及接口axios等知识点。
1.开始搭建项目框架，使用vite来构建项目

1. npm create vite@latest

复制代码

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

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

复制代码

index.js文件中的内容：

1. import { createRouter, createWebHashHistory } from "vue-router";
2. import HomeView from "../views/HomeView.vue";
4. const routes = [
5.   {//首页
6.     path: "/",
7.     name: "home",
8.     component: HomeView,
9.   },
10.   {//书籍商城
11.     path: "/about",
12.     name: "about",
13.     component: () =>
14.       import( "../views/AboutView.vue"),
15.   },
16.   {//登录页
17.     path: "/userlogin",
18.     name: "userlogin",
19.     component: () =>
20.       import("../views/UserLoginView.vue"),
21.   },
22. ];
24. const router = createRouter({
25.   history: createWebHashHistory(),
26.   routes,
27. });
29. export default router;

复制代码

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

1. import router from "./router";
3. createApp(App).use(router).mount("#app");

复制代码

1. <template>
2.   <nav>
3.     <router-link to="/">首页</router-link> |
4.     <router-link to="/about">书籍商城</router-link> |
5.     <router-link to="/userlogin">登录</router-link>
6.   </nav>
7.   <router-view />
8. </template>
10. <style>
11. #app {
12.   font-family: Avenir, Helvetica, Arial, sans-serif;
13.   -webkit-font-smoothing: antialiased;
14.   -moz-osx-font-smoothing: grayscale;
15.   text-align: center;
16.   color: #2c3e50;
17. }
19. nav {
20.   padding: 40px;
21. }
23. nav a {
24.   font-weight: bold;
25.   font-size: 1.4rem;
26.   color: #2c3e50;
27.   text-decoration: none;
28. }
30. nav a.router-link-exact-active {
31.   color: #42b983;
32. }
33. </style>

复制代码

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

1. <template>
2.   <div class="home">
3.     <div class="box"></div>
4.     <!-- 书籍新闻列表部分 -->
5.     <div class="booklist">
6.       <table>
7.         <tr v-for="item in list">
8.             <td>{{ item.type }}&nbsp;&nbsp;&nbsp;&nbsp;<a href="">{{ item.title }}</a></td>
9.             <td>{{ item.type }}&nbsp;&nbsp;&nbsp;&nbsp;<a href="">{{ item.title }}</a></td>
10.         </tr>
11.       </table>         
12.     </div>
13.     <!-- 好书推荐部分 -->
14.     <div class="bookrec">
15.       <div class="booktitle">
16.         <h3 >好书推荐</h3>
17.       </div>
18.       <ul class="recomd">
19.         <li class="booItem" v-for="item in bookitem">
20.           <img :src="item.url" alt="">
21.           <a href="#">{{item.title}}</a>
22.           <p class="intro">{{ item.intro }}</p>
23.           <p class="price">{{ item.price }}</p>
24.         </li>
25.       </ul>
26.     </div>
28.   </div>
29. </template>
31. <script setup>
32. import { ref} from 'vue'
33. const list=ref([
34.   {
35.     type:'[悬疑]',
36.     title:'河尸诡棺：大河生凶煞，送棺三千里'
37.   },
38.   {
39.     type:'[仙侠]',
40.     title:'成就系统：我在武道世界里偷偷修仙'
41.   },
42.   {
43.     type:'[历史]',
44.     title:'一品权臣：权臣护国保民，安定社稷'
45.   },
46.   {
47.     type:'[玄幻]',
48.     title:'诡道修仙：雨淋血染草，月照鬼守尸'
49.   },
50.   {
51.     type:'[都市]',
52.     title:'我的空间能修仙：我混的风生水起！'
53.   },
54. ])
55. const bookitem=ref([
56.   {
57.     url:'../src/assets/img1.jpeg',
58.     title:'大明：寒门辅臣',
59.     intro:'寒门出身，临渊而行，三朝辅臣，巅峰大明！',
60.     price:'¥23'
61.   },
62.   {
63.     url:'../src/assets/img2.jpeg',
64.     title:'津门诡事录',
65.     intro:'浮尸丹鼎、黄仙寻仇、水鬼拉脚、凶灵砌墙……怪力乱神？装神弄鬼！',
66.     price:'¥26'
67.   },
68.   {
69.     url:'../src/assets/img3.jpeg',
70.     title:'一品',
71.     intro:'世家少年入江湖，一刀将这天下捅了个通透。',
72.     price:'¥28'
73.   },
74.   {
75.     url:'../src/assets/img4.jpeg',
76.     title:'怒火狂飙',
77.     intro:'一段视频引发战神狂怒，铁拳霸绝横推一切不平，九万里山河染血。',
78.     price:'¥35'
79.   }
80. ])
81. </script>
83. <style lang="scss" scoped>
84. a{
85.   text-decoration: none;
86. }
87. ul,li{
88.   list-style: none;
89. }
90. .box{
91.   width: 55rem;
92.   height: 26rem;
93.   background: url('../assets/pic3.jpg') no-repeat;
94.   background-size: 100% 100%;
95.   margin-left: auto;
96.   margin-right: auto;
97. }
98. .booklist{
99.   width: 50rem;
100.   // height: 10rem;
101.   // background: #fc0;
102.   margin-left: auto;
103.   margin-right: auto;
104.   margin-top: 0.5rem;
105.   table{
106.     display: flex;
107.     flex-wrap: wrap;
108.   }
109.   td{
110.     width: 25rem;
111.     height: 3rem;
112.     color: rgb(160, 160, 159);
113.     background: rgb(188, 205, 251);
114.     a{
115.       text-decoration: none;
116.       color: rgb(46, 45, 44);
117.       cursor: pointer;
118.       transition: all 0.5s;
119.       &:hover{
120.         color: rgb(233, 115, 37);
121.       }
122.     }
123.   }
124. }
125. .bookrec{
126.   width: 55rem;
127.   height: 25rem;
128.   margin-top: 0.5rem;
129.   background: rgba(219, 206, 245, 0.6);
130.   margin-left: auto;
131.   margin-right: auto;
132.   .booktitle{
133.     width: 55rem;
134.     height: 3.2rem;
135.     border-bottom: 1px rgb(161, 161, 159) solid;
136.     h3{
137.       float: left;
138.       padding-left: 1rem;
140.     }
141.   }
142.   .recomd{
143.     display: flex;
144.     justify-content: space-around;
145.     li{
146.       width: 10rem;
147.       img{
148.         width: 9.6rem;
149.         height: 12.6rem;
150.       }
151.       a{
152.         color: rgb(60, 60, 58);
153.         &:hover{
154.           color: rgb(233, 115, 37);
155.         }
156.       }
157.       .intro{
158.         -webkit-box-orient: vertical;
159.         -webkit-line-clamp: 2;
160.         white-space: nowrap;
161.         overflow: hidden;
162.         color: rgb(146, 146, 143);
163.       }
164.       .price{
165.         color: rgb(243, 149, 8);
166.         font-weight: 400;
167.       }
168.     }
169.   }
170. }
172. </style>

复制代码

 首页效果图：

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

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

复制代码

1. <template>
2.   <div class="about">
3.     <h2>{{ title }}</h2>
4.     <!-- 搜索 -->
5.     <div class="search">
6.         <input type="text" placeholder="请输入要查询的书籍类型" class="searchinput"  @keyup.enter="search" v-model="book">
7.         <button class="btn" @click="search">搜索</button>
8.     </div>
9.     <!-- 搜索结果 -->
10.     <div class="searchResult">
11.       <h3>搜索结果</h3>
12.     </div>
13.     <ul class="allbook">
14.       <li class="bdesign" v-for="item in bookList">
15.         <img :src="item.cover" alt="">
16.         <div class="intro">
17.           <h4 >{{item.title}}</h4>
18.           <p class="bookintro">作者：{{ item.author }}</p>
19.           <p class="bookintro">类型：{{ item.fictionType }}</p>
20.           <p class="bookintro">简介：{{ item.descs }}</p>
21.           <p class="bookintro">出版时期：{{ item.updateTime }}</p>
22.         </div>
23.       </li>
24.     </ul>
25.   </div>
26. </template>
27. <script setup>
28. // import { reactive } from 'vue';
29. import {useRoute} from 'vue-router'
30. import {ref} from 'vue'
31. import axios from 'axios'
32. const route=useRoute();
33. // let data=reactive({
34. //     query: route.query
35. // })
36. const title=ref('欢迎来到阅读站')
37. const bookList = ref('')
38. const book=ref('')
39. //调用书籍目录接口
40. const search = () => {
41.   axios.get(`https://api.pingcc.cn/fiction/search/title/小说/1/10`)
42.    
43.   .then((result) => {
44.     bookList.value=result.data.data
45.     console.log(result.data);
46.         })
47.   .catch((err)=>{
48.     alert("书籍输入错误")
49.     console.log(err)
50.   })
51. }
52. </script>
53. <style lang="scss" scoped>
54. a{
55.         text-decoration: none;
56. }
57. ul,li,ol{
58.         list-style: none;
59. }
60. .about{
61.   width:55rem;
62.   height:100rem;
63.   background:rgba(214, 197, 248, 0.6);
64.   margin-left: auto;
65.   margin-right: auto;
66.   h2{
67.     color: rgb(39, 14, 162);
68.   }
69. }
70. .searchinput{
71.     width: 30rem;
72.     height: 2.3rem;
73.     margin-right: 1rem;
74. }
75. .btn{
76.     width: 5rem;
77.     height: 2.3rem;
78.     background: rgb(66, 104, 240);
79.     color: #fff;
80.     border: none;
81.     border-radius: 0.5rem;
82.     cursor: pointer;
83.     transition: all 0.5s;
84. }
85. .btn:hover{
86.   background: rgb(245, 185, 66);
87. }
88. .searchResult{
89.   margin-top: 1.5rem;
90.   width: 55rem;
91.   height: 3.2rem;
92.   // background: #59c71e;
93.   border-bottom: 1px #b1aeae solid;
94.   h3{
95.     padding-left: 1rem;
96.     float: left;
97.   }
98. }
99. .allbook{
100.   margin-top: 1rem;
101.   display: flex;
102.   justify-content: space-between;
103.   flex-wrap: wrap;
104.   align-content: flex-start;
105.   padding:0  10px;
106.   .bdesign{
107.     display: flex;
108.     padding-top: 2rem;
109.    
110.     img{
111.       width: 12rem;
112.       height: 14rem;
113.     }
114.     .intro{
115.       width: 12rem;
116.       height: 14rem;
117.       // background: #c64848;
118.       margin-left: 0.5rem;
119.       .bookintro{
120.         -webkit-box-orient: vertical;
121.         -webkit-line-clamp: 2;
122.         white-space: nowrap;
123.         // text-overflow: ellipsis;
124.         overflow: hidden;
125.         text-align: justify;
127.       }
128.     }
129.   }
130.   
131. }
133. </style>

复制代码

 册本商城效果图：

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

1. <template>
2.         <div class="box">
3.                 <div class="title">
4.                    <h3>{{ msg }}</h3>
5.             </div>
6.                 <div class="box_form">
7.                         <form method="post">
8.                                 <div class="img_control">
9.                                     <img src="../assets/pic.jpeg" class="pic"/>
10.                             </div>
11.                             <label class="form-label txt" for="username">用&nbsp;户&nbsp;名:</label>
12.                             <input  class="form-input txt" type="text" placeholder="用户名" required="required" ref="username"/><br>
13.                             <label class="form-label" for="password">密&nbsp;&nbsp;码:</label>
14.                             <input  class="form-input paw" type="password" placeholder="密码" required="required" ref="password"/><br>
15.                             <label  class="form-label" for="password">没有账号？<a href="#">点击注册</a></label><br>
16.                             <input  class="form-button" type="submit" value="登录" @click="login"/>
17.                         </form>
18.                 </div>
19.         </div>
20.    
21. </template>
23. <script setup>
24. import {useRouter,onBeforeRouteLeave} from 'vue-router';
25. import {ref} from "vue";
26. const router = useRouter();
27. const msg=ref('欢迎登录');
28. const username=ref(null);
29. const password=ref(null);
30. const login=()=>{
31.         if(username.value.value === 'zhangsan' && password.value.value==='123456'){
32.                 window.localStorage.setItem('userToken',username.value.value+password.value.value)
33.                 router.push({
34.                     path:'/about',
35.                 query:{
36.                         username:"zhangsan",
37.                         password:123456
38.                 }
39.             })
40.         }else{
41.                 alert('用户名或密码错误！')
42.         }
43.         console.log(username.value.value)
44. }
45. onBeforeRouteLeave((to)=>{
46.     let userToken=localStorage.getItem('userToken')
47.     if(to.name!='userlogin' && userToken==null){
48.         return false;
49.     }
50. })
51. </script>
53. <style lang="scss" scoped>
54. .box{
55.         width: 50rem;
56.         height: 30.5rem;
57.         background-color: rgba(188, 176, 212, 0.6);
58.         margin-left: auto;
59.         margin-right: auto;
60. }
61. .title {
62.         text-align: center;
63.         font-size: 2rem;
64.         color: rgba(115, 87, 172, 0.6);
65.         // margin-top: 1rem;
66.         padding-top: 0.8rem;
67. }
69. .box_form {
70.         width: 50rem;
71.         height: 18rem;
72.         margin-left: auto;
73.         margin-right: auto;
74.     .img_control{
75.         margin-top: 6.5rem
76.     }
77.     .pic{
78.         margin-left: 3rem;
79.         float: left;
80.     }
81.     img{
82.         width: 15rem;
83.         height: 15rem;
84.     }
85.     .form-input {
86.         width: 20rem;
87.             height: 2.5rem;
88.             padding-left: 0.5rem;
89.             border-radius: 0.5rem;
90.                 border: none;
91.     }
92.     .paw{
93.         margin-top: 2rem;
94.             margin-bottom: 1rem;
95.                 margin-left: 0.7rem;
96.     }
97.     .form-label{
98.         margin-left: 2rem;
99.                 margin-right: 1rem;
100.                 a{
101.                         // display: block;
102.                         text-decoration: none;
103.                         color: rgb(58, 58, 57);
104.                         &:hover{
105.                                 color: #f17e0b;
106.                         }
107.                 }
108.     }
109.     .form-button {
110.         width: 20.5rem;
111.             height: 2.5rem;
112.             margin-top: 1rem;
113.             margin-left: 6.5rem;
114.             font-size: 1.8rem;
115.                 border: none;
116.                 border-radius: 0.8rem;
117.             font-family: "宋体";
118.                 background: rgb(245, 150, 199);
119.                 color: #fff;
120.                 font-weight: 400;
121.                 cursor: pointer;
122.                 &:hover{
123.                         background: #f17e0b;
124.                 }
125.     }
127. }
128. </style>

复制代码

 登录效果图：

 
7.最后来看看现实效果吧
     册本商城案例
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。