SSM项目实战-编写路由规则以及登录页面实现，使用Vue3+Vite+Element-Plus+Axios技术

本文介绍: 具体来说，createWe bHi st o ry()函数的作用是创建一个基于 HTML5 Hi st o ry API 的历史管理对象。这个对象有两个主要的方法：push和replace，分别对应于浏览器历史记录的前进和替换操作

1、components/Lo gin.vue

&lt;template&gt;
  <div class="common-layout"&gt;
    <el-container&gt;
      <el-header height="120px"&gt;&amp;nbsp;</el-header&gt;
      <el-container&gt;
        <el-aside width="36%"&gt;&amp;nbsp;</el-aside&gt;
        <el-container>
          <el-main>
            <el-form :model="form" label-width="120px">
              <el-form-item label="用户名：">
                <el-input v-model="form.username" input-style="width:200px"/>
              </el-form-item>
              <el-form-item label="密&amp;nbsp&amp;nbsp码：">
                <el-input
                    v-model="form.userPwd"
                    type="password"
                    placeholder="Please input password"
                    show-password
                    input-style="width:200px"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="doLogin">登录</el-button>
                <el-button>注册</el-button>
              </el-form-item>
            </el-form>
          </el-main>
          <el-footer>&amp;nbsp;</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import {reactive} from 'vue'

const form = reactive({
  username: 'lina',
  userPwd: '123456',
})
</script>

2、App.vue

<template>
  <div>
    <!--路由的出口-->
    <router-view/>
  </div>
</template>

3、安装 路由器Vue Rout er，添加 依赖

https://router.vuejs.org/zh/installation.html

npm install vue-router@4

4、 package.json

{
  "name": "pro20-schedule",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "element-plus": "^2.4.2",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "vite": "^5.0.0"
  }
}

5、router/router.js

import {createRouter, createWebHistory} from "vue-router";
import Login from "../src/components/Login.vue";
import Index from "../src/components/index.vue";

let router=createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/',
            component:Login
        },
        {
            path:'/login',
            redirect:'/'
        },
        {
            path:'/index',
            component: Index,
        }
    ]
})
export default router;

6、main.js

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

import router from "./router/router.js";

let app = createApp(App);
app.use(router)
app.use(ElementPlus, {
    locale: zhCn,
})
app.mount('#app')

7、createWebHistory()

在 Vue Router 4（Vue3的路由库）中，createWebHistory() 是一个工厂函数，用于创建一个 HTML5 history 对象。这个对象允许你在单页面应用（SPA）中管理浏览器的历史记录。

具体来说，createWebHistory() 函数的作用是创建一个基于 HTML5 History API 的历史管理对象。这个对象有两个主要的方法：push 和 replace，分别对应于浏览器历史记录的前进和替换操作。

push 方法：当你想要导航到一个新的页面时，你可以调用 push 方法，并传入一个表示新页面路径的字符串。这会在浏览器历史记录中添加一个新的记录，并且浏览器的地址栏会显示新的地址。

replace 方法：如果你不想在当前浏览器历史记录中添加一个新的记录，而是想要替换掉当前的记录，你可以使用 replace 方法。这在你初始化应用或者处理重定向时很有用。

使用 createWebHistory() 创建的历史对象，Vue Router 会自动处理 URL 的变化和导航。这意味着，当你的应用中的路由变化时，Vue Router 会自动更新浏览器的地址栏，并且当你的用户在浏览器中点击前进或后退按钮时，Vue Router 会自动导航到正确的页面。

以下是一个简单的示例：
import { createRouter, createWebHistory } from 'vue-router'  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes: [  
    // your routes here  
  ],  
})
在这个示例中，我们创建了一个使用 HTML5 history 模式的 Vue Router 实例。这意味着当用户导航到不同的页面时，浏览器的地址栏会显示新的 URL，并且用户可以使用浏览器的前进和后退按钮来导航。