1、components/Login.vue
html<template> <div class="common-layout"> <el-container> <el-header height="120px"> </el-header> <el-container> <el-aside width="36%"> </el-aside> <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="密  码:"> <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> </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
html<template> <div> <!--路由的出口--> <router-view/> </div> </template>
3、安装路由器Vue Router,添加依赖
htmlnpm install vue-router@4
4、 package.json
javascript{ "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
javascriptimport {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
javascriptimport { 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 会自动导航到正确的页面。以下是一个简单的示例:
javascriptimport { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ // your routes here ], })
在这个示例中,我们创建了一个使用 HTML5 history 模式的 Vue Router 实例。这意味着当用户导航到不同的页面时,浏览器的地址栏会显示新的 URL,并且用户可以使用浏览器的前进和后退按钮来导航。
SSM项目实战-编写路由规则以及登录页面实现,使用Vue3+Vite+Element-Plus+Axios技术
丁总学Java2023-12-07 8:32
相关推荐
GoppViper15 分钟前
uniapp中实现<text>文本内容点击可复制或拨打电话Sam902924 分钟前
【Webpack--007】处理其他资源--视频音频Code成立25 分钟前
HTML5精粹练习第1章博客架构师ZYL37 分钟前
node.js+Koa框架+MySQL实现注册登录gxhlh1 小时前
React Native防止重复点击一只小白菜~2 小时前
实现实时Web应用,使用AJAX轮询、WebSocket、还是SSE呢??计算机学姐2 小时前
基于python+django+vue的在线学习资源推送系统晓翔仔2 小时前
CORS漏洞及其防御措施:保护Web应用免受攻击jingling5552 小时前
后端开发刷题 | 数字字符串转化成IP地址GISer_Jing3 小时前
【前后端】大文件切片上传