1.修复了route不能在App.vue中正常显示的bug

2.精简了App.vue,重构了HelloWorld.vue
3.在route/index.js中留了个小彩蛋
4.添加了一些提示语
This commit is contained in:
高子兴 2024-06-25 00:23:34 +08:00
parent e8e794e9d4
commit 83bc094502
4 changed files with 33 additions and 35 deletions

View File

@ -1,30 +1,10 @@
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<router-view></router-view>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
<script setup>
import 'element-plus/dist/index.css'
</script>
<!--请不要对App.vue进行修改请采用在views的对应目录下新建自己需要的文件
并通过在/router下的对应模块名称的js中引入路由的方式来显示自己的页面-->

View File

@ -1,17 +1,19 @@
<script setup>
import { ref } from 'vue'
import 'element-plus/dist/index.css'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<h1>{{ this.$route.meta.msg }}</h1>
<div class="card">
<el-button type="success" @click="count++">count is {{ count }}</el-button>
@ -39,6 +41,18 @@ const count = ref(0)
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
.read-the-docs {
color: #888;
}

View File

@ -7,8 +7,10 @@ import newsManagementRoutes from './newsManagement'
import organizationManagementRoutes from './organizationManagement'
import userManagementRoutes from './userManagement'
// 请不要直接修改本文件使用在router下的对应模块名称的js中引入路由的方式来代替->
const routes = [
{ path: '/', component: HelloWorld },
{ path: '/', component: HelloWorld, meta: {"msg": "HeIl⚪ W0rId!"}},
...authenticationRoutes,
...courseManagementRoutes,
...meetingManagementRoutes,

View File

@ -6,6 +6,8 @@ import newsManagement from './newsManagement'
import organizationManagement from './organizationManagement'
import userManagement from './userManagement'
// 请不要直接修改本文件,使用修改/store目录下的对应模块名称的js的方式来代替->
const store = createStore({
modules: {
authentication,