feat:#1 页面路由与跳转

Author: terwer

app.vue

@@ -1,7 +1,11 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage/>
-  </NuxtLayout>
+  <Transition name="page" mode="out-in">
+    <NuxtLayout>
+      <div :key="$route.fullPath">
+        <NuxtPage/>
+      </div>
+    </NuxtLayout>
+  </Transition>
 </template>
 
 <script lang="ts" setup>

assets/scss/index.scss

@@ -13,4 +13,36 @@ html.dark {
 a {
   font-weight: 400;
   color: var(--el-color-primary);
+}
+
+/*
+页面动画
+https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
+*/
+.page-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.page-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.page-enter-from,
+.page-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.layout-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.layout-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.layout-enter-from,
+.layout-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
 }

components/default/Footer.vue

@@ -1,13 +1,16 @@
 <template>
   <footer>
-    footer
+    footer .
+    <NuxtLink href="/setting">Setting</NuxtLink>
   </footer>
 </template>
 
 <script lang="ts">
+
 export default {
   name: "Footer"
 }
+
 </script>
 
 <style scoped>

components/default/Header.vue

@@ -1,15 +1,31 @@
 <template>
   <header>
+    <el-page-header :icon="ArrowLeft" title="返回" @click="onBack" v-if="$route.fullPath!='/'">
+      <template #content>
+        <div class="flex items-center">
+          <span class="text-large font-600 mr-3"> {{ $route.fullPath }} </span>
+        </div>
+      </template>
+    </el-page-header>
+
     <Navbar/>
   </header>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import Navbar from "~/components/default/Navbar.vue";
+import {ElPageHeader} from "element-plus";
+import {ArrowLeft} from '@element-plus/icons-vue'
+
+const router = useRouter();
+const onBack = () => {
+  router.go(-1)
+}
+</script>
 
+<script lang="ts">
 export default {
   name: "Header",
-  components: {Navbar}
 }
 </script>
 

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header/>
-    <slot/>
+    <slot />
     <Footer/>
   </div>
 </template>

pages/ChangeTheme.vue pages/setting.vue

@@ -40,9 +40,8 @@
 </template>
 
 <script lang="ts" setup>
-import {ElForm, ElFormItem, ElButton, ElSelect, ElOption} from "element-plus";
-import {ref} from 'vue'
-import {ElSpace, ElDivider} from 'element-plus'
+import {ElButton, ElDivider, ElForm, ElFormItem, ElOption, ElSelect, ElSpace} from "element-plus";
+import {h, ref} from 'vue'
 
 const value = ref('default')
 const options = [
@@ -63,9 +62,10 @@ const langOptions = [
   },
 ]
 
-definePageMeta({
-  layout: false,
-});
+// 使用这一行可以不使用通用布局
+// definePageMeta({
+//   layout: false,
+// });
 
 const route = useRoute()
 
@@ -78,12 +78,9 @@ const spacer = h(ElDivider, {direction: 'vertical'})
 
 <script lang="ts">
 export default {
-  name: "ChangeTheme"
+  name: "seting"
 }
 </script>
 
 <style scoped>
-.setting {
-  padding: 10px;
-}
 </style>