二、Vue3.x+Element Plus项目Demo引入Vue-Router

郁子原创大约 5 分钟约 1449 字项目搭建Vue3Vite3Element PlusVue Router

前言

学习 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 组件库的 表单组件open in new window ，配合 消息提示框open in new window。

<template>
  <div style="padding: 50px 0 0">
    <h1 style="font-size: 50px; font-weight: bolder">Login</h1>
  </div>

  <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" status-icon 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 @click="submitForm(loginFormRef)" type="primary">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 中使用官方提供的 钩子函数open in new window，获取到路由对象，再操作路由。

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 v-if="!isLogged" @click="toLogin" type="danger">登录</el-button>
  <h1 v-else>已登录</h1>

  <!-- 退出登录 -->
  <el-button v-if="isLogged" @click="toLogout" type="warning">退出登录</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 @click="router.push('/')" type="danger">回到首页</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 。

登录成功后跳转回首页。

（五）配置路由守卫

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

// 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/，强制回到登录页。
上次编辑于: