学习笔记二：Vue3.x+Element Plus项目Demo引入Vue-Router

郁子IKUKO
497 阅读2分钟

前言

学习 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. 页面效果

引入vuerouter01.png

（三）配置 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/ 。

引入vuerouter02.png

点击 “登录” 按钮跳转登录页：http://localhost:5000/login 。

引入vuerouter03.png

登录成功后跳转回首页。

引入vuerouter04.png

（五）配置路由守卫

增加路由守卫，对用户访问地址进行拦截。

// src/router/index.js

// 路由守卫
router.beforeEach((to) => {
  // 根据token判断是否登录
  let token = localStorage.getItem("token");
  // 有token但是访问的是登录页 => 强制跳转到首页
  if (token && to.path === "/login") return "/";
  // 没有token但是访问的是首页 => 强制跳转到登录页
  else if (!token && to.path !== "/login") return "/login";
});
  • 访问 http://localhost:3000/login ，强制回到首页。
  • 清空 LocalStorage 的 token，访问 http://localhost:5000/，强制回到登录页。
avatar
文章
阅读
粉丝