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

1、components/Login.vue

 2、App.vue

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

• 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，并且用户可以使用浏览器的前进和后退按钮来导航。