1、携带id跳转前端页面
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
// 跳转到会议详情
const goToMeetingDetail = (id) => {router.push(`/conference/meeting/${id}`)
}
{path: "meeting/:id",component: () => import("@/views/conference/MeetingDetail.vue"),
},
const meetingId = ref(route.params.id);2、将MarkDown文本展示出来
npm install marked
<template><!-- 使用v-html将转换后的HTML渲染到页面上 --><div v-html="htmlContent"></div>
</template><script setup>
import { ref, watchEffect } from 'vue'
import { marked } from 'marked'// 假设articleResponseData.content是Markdown格式的文本
const articleResponseData = {content: '# Hello World\nThis is a *Markdown* content.'
}// 用ref存储渲染的HTML
const htmlContent = ref('')// 使用watchEffect监听Markdown内容的变化，并将其转换为HTML
// 使用onMounted钩子函数，在组件加载时异步转换Markdown
onMounted(async () => {htmlContent.value = await marked(articleResponseData.content)
})
</script>3、转换时间格式
/ 处理时间的函数
export const getFormattedLocalTime = (now) => {const year = now.getFullYear()const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1const day = String(now.getDate()).padStart(2, '0')const hours = String(now.getHours()).padStart(2, '0')const minutes = String(now.getMinutes()).padStart(2, '0')const seconds = String(now.getSeconds()).padStart(2, '0')return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
转换方式：
<script setup>
import { computed, ref } from 'vue'
import { getFormattedLocalTime } from "@/api/common.js";const articleResponseData = ref({// ...其他字段updateTime: "2023-07-15T08:30:00Z" // 假设这是后端返回的时间格式
});// 方式1：使用计算属性（推荐）
const formattedUpdateTime = computed(() => {// 处理可能的空值if (!articleResponseData.value.updateTime) return '';// 将字符串转换为Date对象const date = new Date(articleResponseData.value.updateTime);return getFormattedLocalTime(date);
});// 方式2：直接在模板调用的方法
const formatTime = (timeString) => {if (!timeString) return '';return getFormattedLocalTime(new Date(timeString));
};// 当从接口获取数据时（示例）
const fetchData = async () => {const res = await getArticleData(); // 假设的API调用articleResponseData.value = {...res.data,// 如果需要保持原始时间数据，可以新增一个格式化字段formattedTime: getFormattedLocalTime(new Date(res.data.updateTime))};
};
</script><template><!-- 使用计算属性 --><div>更新时间：{{ formattedUpdateTime }}</div><!-- 直接调用方法 --><div>更新时间：{{ formatTime(articleResponseData.updateTime) }}</div><!-- 如果新增了格式化字段 --><div>更新时间：{{ articleResponseData.formattedTime }}</div>
</template>
最佳实践推荐：
<script setup>
import { computed } from 'vue';
import { getFormattedLocalTime } from "@/api/common.js";const articleResponseData = ref({// ...初始化数据
});// 优化后的计算属性处理
const timeInfo = computed(() => ({createTime: formatTimestamp(articleResponseData.value.createTime),updateTime: formatTimestamp(articleResponseData.value.updateTime)
}));const formatTimestamp = (timestamp) => {try {return timestamp ? getFormattedLocalTime(new Date(timestamp)) : '--';} catch (e) {console.error('时间格式错误:', timestamp);return '无效时间';}
};
</script><template><div class="time-display"><p>创建时间：{{ timeInfo.createTime }}</p><p>最后更新：{{ timeInfo.updateTime }}</p></div>
</template><style scoped>
.time-display {color: #666;font-size: 0.9em;margin-top: 10px;
}
</style>
关键点说明：
- 时间处理安全
- 添加了空值判断 (
?.操作符) - 使用 try-catch 捕获无效时间格式
- 返回默认值 (‘–’) 保持界面友好
- 响应式处理
- 使用
computed自动追踪依赖 - 当原始时间值变化时自动更新
- 国际化扩展建议
// 在common.js添加
export const formatWithLocale = (date, locale = 'zh-CN') => {return new Intl.DateTimeFormat(locale, {year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit'}).format(date);
};// 使用示例
const formatTimestamp = (timestamp) => {// ...return formatWithLocale(new Date(timestamp));
};
- 时区处理建议
// 如果后端返回UTC时间
const utcDate = new Date(timestamp + 'Z');
// 或使用库如day.js/moment-timezone
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);const formatTimestamp = (timestamp) => {return dayjs(timestamp).utc().format('YYYY-MM-DD HH:mm:ss');
};
- 性能优化
- 避免在模板中直接调用方法（每次渲染都会执行）
- 优先使用计算属性（带缓存）
- 批量处理多个时间字段
完整方案集成：
<script setup>
import { computed } from 'vue';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);const articleResponseData = ref({// ...初始化数据
});const timeInfo = computed(() => ({createTime: formatTime(articleResponseData.value.createTime),updateTime: formatTime(articleResponseData.value.updateTime)
}));const formatTime = (timestamp) => {if (!timestamp) return '--';try {// 带时区转换的格式化return dayjs(timestamp).utc().format('YYYY-MM-DD HH:mm:ss');// 或者使用原生Date// return getFormattedLocalTime(new Date(timestamp));} catch (e) {console.warn('时间格式化失败:', timestamp);return '无效时间';}
};
</script>
这种实现方式可以：
- 自动处理UTC时间转换
- 提供友好的错误提示
- 兼容不同的时间格式输入
- 保持响应式更新
- 方便扩展多语言支持
使一个元素在不影响其他元素的情况下，靠在最右
可以使用 Flex 布局实现右对齐效果，修改容器为 flex 容器并添加 margin-left: auto 到编辑按钮。修改后的代码如下：关键：display: flex; align-items: center+margin-left: auto
<div style="background-color: #efeeee"><!-- 添加 display: flex 到这一层 --><div style="display: flex; align-items: center"><span style="background-color: rgb(251, 127, 127); color: white">{{articleResponseData.articleType}}</span><spanstyle="margin-left: 20px; margin-right: 20px; cursor: pointer">{{ userInfo.username }}</span><spanv-html="'已于 ' + formattedUpdateTime + ' 修改'"></span><!-- 这里添加 margin-left: auto --><span style="cursor: pointer; margin-left: auto">编辑</span></div><div v-for="(tag, index) in tags" :key="index" class="hot-item"><el-text>文章标签：</el-text><el-button style="color: blue">{{ tag.name }}</el-button></div>
</div>
关键修改点：
- 在包含编辑按钮的父级容器添加
display: flex - 在编辑按钮的样式添加
margin-left: auto - 建议添加
align-items: center保持内容垂直居中
4、将网站的顶部导航栏设置为不随页面滚动而被遮挡
一、使用固定定位（Fixed Positioning）
通过 position: fixed 将导航栏固定在视口顶部，并设置 z-index 保证其位于其他内容之上。
实现代码示例：
.navbar {position: fixed;top: 0;left: 0;width: 100%;z-index: 999; /* 确保导航栏在最上层 */background: #fff; /* 可选背景色 */box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选阴影效果 */width: 100%;
}
同时，为避免导航栏遮挡页面主体内容，需给页面内容容器添加顶部内边距或外边距：
body {padding-top: 100px; /* 根据导航栏实际高度调整 */
}
此方法适用于需要导航栏始终可见的场景，如电商网站或长页面浏览。
二、使用粘性定位（Sticky Positioning）
通过 position: sticky 实现导航栏在滚动到特定位置时固定，灵活性更高：
.navbar {position: sticky;top: 0;z-index: 999;
}
此方法适合导航栏初始位置在页面中上部（而非绝对顶部）的情况，例如带横幅的页面布局。
三、调整页面内容的间距
若导航栏未固定但需要避免遮挡，可通过以下方式调整内容位置：
- 外间距法：为内容容器添加
margin-top：.content {margin-top: 80px; /* 与导航栏高度匹配 */ } - 内边距法：为页面主体添加
padding-top（推荐）：body {padding-top: 80px; }
这两种方法均能避免内容被遮挡，但需确保数值与导航栏实际高度一致。
四、处理锚点跳转的遮挡问题
当用户通过导航栏内的链接跳转到页面内锚点时，使用 scroll-margin-top 属性为目标元素预留空间：
.target-section {scroll-margin-top: 100px; /* 等于导航栏高度 */
}
此属性会在滚动到目标元素时自动留出顶部空间，避免被固定导航栏遮挡。
五、响应式设计适配
针对移动端等小屏幕设备，可通过媒体查询调整导航栏样式：
@media (max-width: 768px) {.navbar {position: static; /* 取消固定定位 *//* 其他样式调整（如折叠菜单） */}body {padding-top: 0; /* 移除顶部间距 */}
}
此方法确保在不同设备上导航栏与内容的协调性。
总结建议
- 优先方案：固定定位（
position: fixed）配合padding-top调整内容间距，适合大多数需导航栏常显的场景。 - 进阶优化：结合
scroll-margin-top处理锚点跳转，提升用户体验。 - 注意事项：务必测试导航栏的
z-index值，避免被其他元素覆盖；移动端需考虑折叠菜单等响应式设计。