Vue3——网站整体布局、用户动态页面（下）

最新推荐文章于 2024-10-16 11:57:58 发布

mfg_

最新推荐文章于 2024-10-16 11:57:58 发布

阅读量1k

点赞数

分类专栏： springboot框架课文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_36288669/article/details/125834079

版权

本文介绍如何在Vue3项目中实现前端渲染的导航栏组件，通过修改NavBar.vue并使用router来响应点击事件。同时展示了如何构建用户动态页面，包括用户动态列表的创建，利用Bootstrap的grid系统进行布局，以及处理头像大小问题。最后讨论了在组件间传递信息的方法，并讲解了关注按钮的状态控制和事件绑定。

摘要由CSDN通过智能技术生成

导航栏组件

到现在为止，发现访问每个页面还需要在地址栏url修改；
打开导航栏NavBar.vue
在这里插入图片描述
修改成如下，发现每点击一个导航栏刷新url地址，重新请求服务器，这不叫做前端渲染

添加一个属性标签代替href a标签；

home是在router中设置的名称。

技巧:按住alt键，同点击光标可以同时修改多个标签a
acwing编辑器是按爪ctrl同时打字母

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <!-- -fluid去掉会偏向中间一些，导航栏 -->
        <div class="container">
            <router-link class="navbar-brand " :to="{ name: 'home', params: {} }">MySpace</router-link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data