vite2 + vue3 + vue-router4 + vuex4 + element-plus 实战(二)-登录页面

引入vue-router

yarn add vue-router@next

添加登录路由

1. src目录下新建router文件夹
2. router文件夹下新建index.js

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

const routes = [
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/login.vue"),
  },

  { path: "/:catchAll(.*)", redirect: "/404", hidden: true },
];

const router = createRouter({
  history: createWebHistory(), //history模式使用HTML5模式
  routes,
});

export function resetRouter() {
  const newRouter = createRouter({
    history: createWebHistory(),
    routes,
  });

  router.matcher = newRouter.matcher; // reset router
}

// router.beforeEach(async(to, from, next) => {

// })

export default router;

修改main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import installElementPlus from "./plugins/element";

import "./styles/index.scss";

const app = createApp(App);

installElementPlus(app);

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

修改App.vue

添加页面

1. src目录下新建views文件夹用于存放页面组件
2. views文件夹下新建login.vue

运行项目

yarn dev

image.png

项目参考：vue-admin-template