Forráskód Böngészése

✨ feat(test): 添加测试页面和按钮功能,更新路由历史模式

陈雪 1 hete
szülő
commit
b4aa59a68b
3 módosított fájl, 78 hozzáadás és 2 törlés
  1. 1 0
      index.html
  2. 8 2
      src/router/index.ts
  3. 69 0
      src/views/test/index.vue

+ 1 - 0
index.html

@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tauri + Vue 3 App</title>
+    <script src="http://localhost:8098"></script>
     <!-- <link href="/src/styles.css" rel="stylesheet"> -->
   </head>
 

+ 8 - 2
src/router/index.ts

@@ -1,4 +1,4 @@
-import { createWebHashHistory, createRouter, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 import LayoutView from '../views/layout/index.vue'
 import LoginView from '../views/login/index.vue'
@@ -18,10 +18,16 @@ const routes: RouteRecordRaw[] = [
       { path: '/exit', component: ExitView },
     ],
   },
+  {
+    path: '/test',
+    name: 'Test',
+    component: () => import('@/views/test/index.vue'),
+  },
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 })
+
 export default router

+ 69 - 0
src/views/test/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <button @click="test1">Test Button 1</button>
+    <button @click="test2">Test Button 2</button>
+    <button @click="test3">Test Button 3</button>
+    <button @click="test4">Test Button 4</button>
+    <button @click="test5">Test Button 5</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const test1 = () => {
+    console.log('Test Button 1 clicked')
+  }
+  const test2 = () => {
+    console.log('Test Button 2 clicked')
+  }
+  const test3 = () => {
+    console.log('Test Button 3 clicked')
+  }
+  const test4 = () => {
+    console.log('Test Button 4 clicked')
+  }
+  const test5 = () => {
+    console.log('Test Button 5 clicked')
+  }
+</script>
+
+<style scoped lang="scss">
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+  }
+
+  button {
+    margin: 10px;
+    padding: 15px 30px;
+    font-size: 18px;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+
+  .button {
+    margin: 10px;
+    padding: 15px 30px;
+    font-size: 18px;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+</style>