添加hash支持(页面)

src/App.vue

@@ -3,8 +3,12 @@ import {onMounted, ref} from "vue";
 
 import Login from "./components/login/index.vue";
 import DataFields from "./components/data-fields/index.vue";
+import Product from "./components/product/index.vue";
+import Field from "./components/field/index.vue";
+import Result from "./components/result/index.vue";
+
 import {MenuItem, Menu, Icon} from "view-ui-plus";
-import Layout from "./components/layout/index.vue"
+import {useHash} from "./service/router.ts";
 
 const page_data = ref({
     showLogin: false,
@@ -23,27 +27,32 @@ onMounted(() => {
     }
 })
 const MENU_LIST = [
-    {title:'药品管理',name:'products',icon:'ios-cube'},
+    {title: '药品管理', name: 'product', icon: 'ios-cube'},
-    {title:'数据项管理',name:'fields',icon:'ios-apps'},
+    {title: '数据项管理', name: 'field', icon: 'ios-apps'},
-    {title:'数据管理',name:'product_value',icon:'ios-paper'},
+    {title: '数据管理', name: 'product_value', icon: 'ios-paper'},
-    {title:'计算结果',name:'result',icon:'ios-calculator'},
+    {title: '计算结果', name: 'result', icon: 'ios-calculator'},
 ]
-const activeMenu = ref(MENU_LIST[0].name)
+const hash = useHash()
-const onMenuSelect = (name:string)=>activeMenu.value = name
+const activeMenu = ref((hash.value || MENU_LIST[0].name))
+const onMenuSelect = (name: string) => {
+    activeMenu.value = name
+    window.location.hash = name
+}
+
 </script>
 
 <template>
     <div class="app-container">
         <Login v-if="page_data.showLogin" @login-success="onLoginSuccess"/>
-<!--        <Layout />-->
+        <!--        <Layout />-->
         <div class="app-header">
             <div class="app-logo">
-                <img class="logo" src="./assets/images/logo.png" alt="" />
+                <img class="logo" src="./assets/images/logo.png" alt=""/>
             </div>
             <div class="app-menu">
                 <Menu mode="horizontal" :active-name="activeMenu" @on-select="onMenuSelect">
                     <MenuItem v-for="m in MENU_LIST" :key="m.name" :name="m.name">
-                        <Icon :type="m.icon" size="20" />
+                        <Icon :type="m.icon" size="18"/>
                         <span>{{ m.title }}</span>
                     </MenuItem>
                 </Menu>
@@ -51,6 +60,9 @@ const onMenuSelect = (name:string)=>activeMenu.value = name
         </div>
         <div class="app-content">
             <DataFields v-if="activeMenu == 'product_value'"/>
+            <Field v-else-if="activeMenu == 'field'"/>
+            <Product v-else-if="activeMenu == 'product'"/>
+            <Result v-else/>
         </div>
     </div>
 </template>
@@ -61,32 +73,37 @@ const onMenuSelect = (name:string)=>activeMenu.value = name
     padding: 0;
     box-sizing: border-box;
 }
-.app-header{
+
+.app-header {
     display: flex;
     align-items: center;
     border-bottom: solid 1px #dcdee2;
-    box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
     position: sticky;
     top: 0;
     padding: 0 50px;
     justify-content: space-between;
 }
-.app-menu{
+
-    .ivu-menu{
+.app-menu {
-        &:after{
+    .ivu-menu {
+        &:after {
             display: none;
         }
     }
 }
-.app-content{
+
+.app-content {
     padding: 20px 50px;
 }
-.app-logo{
+
+.app-logo {
     padding: 10px;
     margin-right: 50px;
     display: flex;
     align-items: center;
 }
+
 body {
     background: #fff;
     color: #000;

src/components/field/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <h1>field</h1>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/layout/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import DataFields from "@/components/data-fields/index.vue";
+import DataFields from "../../components/data-fields/index.vue";
 import {Breadcrumb, BreadcrumbItem, Card, Content, Header, Icon, Layout, Menu, MenuItem} from "view-ui-plus";
 import {ref} from "vue";
 

src/components/login/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import {Login as LoginForm, UserName, Password, Submit, Message} from 'view-ui-plus';
+import {Login, UserName, Password, Submit, Message} from 'view-ui-plus';
-import {onMounted} from "vue";
 
 type LoginModel = {
     username: string;
@@ -10,7 +9,8 @@ type LoginModel = {
 const emits = defineEmits<{
     (e: 'loginSuccess'): void
 }>()
-const handleSubmit = (valid: true, params: LoginModel) => {
+const handleSubmit = (...e:any) => {
+    const [valid,params] = e as [valid: true, params: LoginModel];
     if (valid) {
         if (params.username == 'admin' && params.password == 'admin') {
             emits('loginSuccess')
@@ -29,13 +29,13 @@ const handleSubmit = (valid: true, params: LoginModel) => {
                 <img src="../../assets/images/logo.png" alt="">
             </div>
             <p class="desc">营养与健康数据管理处理平台</p>
-            <LoginForm @on-submit="handleSubmit">
+            <Login @on-submit="handleSubmit">
-                <UserName name="username" enterkeyhint/>
+                <UserName name="username" enter-to-submit/>
-                <Password name="password" enterkeyhint/>
+                <Password name="password" enter-to-submit/>
                 <div class="submit">
                     <Submit/>
                 </div>
-            </LoginForm>
+            </Login>
         </div>
     </div>
 </template>

src/components/product/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <h1>product</h1>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/result/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <h1>result</h1>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/service/router.ts

@@ -0,0 +1,22 @@
+import {onMounted, onUnmounted, ref} from "vue";
+
+function getHash() {
+    const hash = window.location.hash
+    return hash.length > 0 ? hash.slice(1) : '';
+}
+
+export const useHash = () => {
+    const hash = ref<string>(getHash())
+
+    const onHashChange = () => {
+        hash.value = getHash()
+    }
+    onMounted(() => {
+        window.addEventListener('hashchange', onHashChange, false)
+    })
+    onUnmounted(() => {
+        window.removeEventListener('hashchange', onHashChange, false)
+    })
+    return hash
+}
+

vite.config.ts

@@ -15,16 +15,17 @@ export default defineConfig({
           if (id.includes('view-ui-plus')) {
             return 'view-ui'
           }
-          if (id.includes('vue')) {
+          // if (id.includes('vue')) {
-            return 'vue'
+          //   return 'vue'
-          }
+          // }
-          if (id.includes('node_modules')) {
+          // if (id.includes('node_modules')) {
-              return id.toString().split('node_modules/')[1].split('/')[0].toString();
+          //     return id.toString().split('node_modules/')[1].split('/')[0].toString();
-          }
+          // }
         }
       }
     },
   },
+  base: './',
   // resolve:{
   //   alias:{
   //     '@': path.resolve(__dirname,"./src")