前言
学习 Vite 和 Vue3 并搭建项目 Demo,主要目的是搭项目,对于新手直接跟着操作就可以把项目搭起来,借这个机会自己尝试写写博客,希望对大家有帮助。
参考链接
(一)安装Vue-Router
# 正式版
npm i vue-router --save
# 最新版
npm i vue-router@next --save
// package.json
{
"name": "vite-vue",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.2.16",
"vue": "^3.2.37",
"vue-router": "^4.0.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"unplugin-auto-import": "^0.11.2",
"unplugin-vue-components": "^0.22.4",
"vite": "^3.1.0"
}
}
(二)准备登录页面
1. 新建:src/components/Login.vue
改造 Element-plus 组件库的 表单组件 ,配合 消息提示框。
<template>
<div style="padding: 50px 0 0">
<h1 style="font-size: 50px; font-weight: bolder">Login</h1>
</div>
<el-form
ref="loginFormRef"
:model="loginForm"
status-icon
:rules="loginFormRules"
label-width="120px"
>
<el-form-item label="Account" prop="email">
<el-input v-model="loginForm.email"></el-input>
</el-form-item>
<el-form-item label="Password" prop="pass">
<el-input v-model="loginForm.pass" type="password" autocomplete="off" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(loginFormRef)">Submit</el-button>
<el-button @click="resetForm(loginFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</template>
使用 <script setup>
语法糖,不用繁琐地导出模板中使用到的每一个变量和方法。
<script setup>
import { ref, reactive } from "vue";
// 配置了按需导入Element-Plus则不用引入,否则反而会丢失样式
// import { ElMessage } from "element-plus";
// 表单数据
const loginFormRef = ref();
const loginForm = reactive({
email: "",
pass: "",
});
// 表单规则
const validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("Please input the password"));
} else {
if (loginForm.checkPass !== "") {
if (!loginFormRef.value) return;
loginFormRef.value.validateField("checkPass", () => null);
}
callback();
}
};
const loginFormRules = reactive({
email: [
{
required: true,
message: "Please input email address",
trigger: "blur",
},
{
type: "email",
message: "Please input correct email address",
trigger: ["blur", "change"],
},
],
pass: [
{
required: true,
validator: validatePass,
trigger: "blur",
},
],
});
// 表单方法
const submitForm = (formEl) => {
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
ElMessage.success("Submitted!");
} else {
ElMessage.error("Oops, error submit!");
return false;
}
});
};
const resetForm = (formEl) => {
if (!formEl) return;
formEl.resetFields();
};
</script>
2. 修改:src/App.vue
先在 App.vue
中直接展示 Login.vue
查看组件效果。
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<Login />
</template>
<script setup>
import Login from "./components/Login.vue";
</script>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
3. 页面效果
(三)配置 vue-router
1.新建:src/router/index.js
path
:自定义的路由路径。component
:匹配的视图组件。- 地址栏
URL
输入相应path
可跳转对应的component
。
// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
const routerHistory = createWebHistory();
const router = createRouter({
history: routerHistory,
routes: [
{
path: "/",
name: "HelloWorld",
component: () => import("../components/HelloWorld.vue"),
},
{
path: "/login",
name: "Login",
component: () => import("../components/Login.vue"),
},
],
});
export default router;
2.项目入口文件引入 vue-router
// src/main.js
import { createApp } from "vue";
import "./style.css";
import ElementPlus from "element-plus";
import App from "./App.vue";
import Router from "./router"; // 引入Vue-Router
const app = createApp(App);
app.use(ElementPlus);
app.use(Router);
app.mount("#app");
(四)在 setup
中访问路由
在 composition API
中使用官方提供的 钩子函数,获取到路由对象,再操作路由。
1.修改:src/App.vue
使用 <router-view>
占位,配置完路由规则后,将在当前位置展示 URL
匹配到的视图组件。
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<!-- <Login /> -->
<router-view></router-view>
</template>
<script setup>
// import Login from "./components/Login.vue";
</script>
2.修改:src/components/HelloWorld.vue
- 增加跳转登录页的按钮,对应路由
"/login"
。 - 使用钩子函数
useRouter()
获取操作路由的方法对象router
,用于路由跳转。 - 使用钩子函数
useRoute()
获取包含路由信息的对象route
,用于获取路由携带的参数信息。
<template>
<!-- 当前路由如果包含“已登录”字段,则隐藏该按钮并显示“已登录” -->
<el-button type="danger" @click="toLogin" v-if="!isLogged">登录</el-button>
<h1 v-else>已登录</h1>
<!-- 退出登录 -->
<el-button type="warning" @click="toLogout" v-if="isLogged">退出登录</el-button>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
// 操作路由跳转
const router = useRouter();
// 获取路由参数
const route = useRoute();
const isLogged = route.params.isLogged;
const toLogin = () => {
router.push("/login");
};
const toLogout = () => {
localStorage.removeItem("token");
router.push("/login");
};
</script>
3.修改:src/components/Login.vue
修改提交按钮回调函数,登录成功后自动跳转回首页,对应路由 "/"
,同时携带路由参数 isLogged
表示已登录。
<template>
<div style="padding: 50px 0">
<h1 style="font-size: 50px; font-weight: bolder">Login</h1>
<el-button type="danger" @click="router.push('/')">回到首页</el-button>
</div>
......
</template>
<script setup>
......
import { useRouter } from "vue-router";
// 路由对象
const router = useRouter();
// 表单方法
const submitForm = (formEl) => {
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
ElMessage.success("Submitted!");
router.push({
// path: "/", // HelloWorld.vue在路由配置文件中定义的路径
name: "HelloWorld", // name 搭配 params 传参、path 搭配 query 传参
params: {
isLogged: true,
},
});
} else {
ElMessage.error("Oops, error submit!");
return false;
}
});
};
</script>
4.页面效果
访问首页:http://localhost:5000/
。
点击 “登录” 按钮跳转登录页:http://localhost:5000/login
。
登录成功后跳转回首页。