fix(sidebar): 添加返回 button,更改页面跳转逻辑

This commit is contained in:
BTMuli
2023-03-06 21:14:33 +08:00
parent a600a180fd
commit 26336465b6

View File

@@ -1,7 +1,16 @@
<template> <template>
<!-- todo 侧边栏宽度调整 -->
<v-navigation-drawer permanent :rail="rail"> <v-navigation-drawer permanent :rail="rail">
<!-- todo 选中没有高亮 -->
<v-list> <v-list>
<!-- 第一个图标负责收缩侧边栏 --> <!-- 第一个图标负责返回上一个页面 -->
<!-- todo 如果没有上一个页面则灰色不可点击 -->
<v-list-item @click="back">
<v-list-item-action>
<v-icon>mdi-arrow-left</v-icon>
</v-list-item-action>
</v-list-item>
<!-- 第二个图标负责收缩侧边栏 -->
<v-list-item @click="collapse"> <v-list-item @click="collapse">
<v-list-item-action> <v-list-item-action>
<v-icon>mdi-menu</v-icon> <v-icon>mdi-menu</v-icon>
@@ -12,7 +21,7 @@
<v-icon>mdi-bug-outline</v-icon> <v-icon>mdi-bug-outline</v-icon>
<span v-show="!rail"> 测试功能 </span> <span v-show="!rail"> 测试功能 </span>
</v-list-subheader> </v-list-subheader>
<v-list-item @click="toPage('/news')"> <v-list-item link href="/news">
<template v-slot:prepend> <template v-slot:prepend>
<v-icon>mdi-calendar-text-outline</v-icon> <v-icon>mdi-calendar-text-outline</v-icon>
</template> </template>
@@ -22,7 +31,7 @@
<v-icon>mdi-cog-outline</v-icon> <v-icon>mdi-cog-outline</v-icon>
<span v-show="!rail"> 开发功能 </span> <span v-show="!rail"> 开发功能 </span>
</v-list-subheader> </v-list-subheader>
<v-list-item @click="toPage('/config')"> <v-list-item link href="/config">
<template v-slot:prepend> <template v-slot:prepend>
<v-icon>mdi-cog-outline</v-icon> <v-icon>mdi-cog-outline</v-icon>
</template> </template>
@@ -50,14 +59,12 @@ export default defineComponent({
}; };
}, },
methods: { methods: {
back() {
this.router.go(-1);
},
collapse() { collapse() {
this.rail = !this.rail; this.rail = !this.rail;
}, },
toPage(path: string) {
if (this.router.currentRoute.path !== path) {
this.router.push(path);
}
},
}, },
}); });
</script> </script>