建议大家先去看我第一篇小兔鲜的文章，强烈建议，非常建议，十分建议，从头开始看更完整。
最近正在学习vue3小兔鲜
下面是学习笔记

会员中心模块

个人中心

个人中心-路由配置

本节目标：个人中心二级路由配置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QALATZFT-1668073285405)(media/image-20210822062307681.png)]

（1）创建组件 src/views/Member/Layout/index.vue

<script setup lang="ts">
//
</script><template><div>个人中心布局容器</div>
</template>

（2）配置路由

{path: "/",component: Layout,children: [...{path: "/member",component: () => import("@/views/Member/Layout/index.vue"),},],},

（3）修改首页头部导航的链接

<li><RouterLink to="/member" ><i class="iconfont icon-user"></i>{{ profile.nickname || profile.account }}</RouterLink>
</li><li><RouterLink to="/member">会员中心</RouterLink></li>

个人中心-三级路由配置

本节目的：完成个人中心页面基础架子，配置路由。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qaeZpCwk-1668073285407)(media/image-20210822063714663.png)]

大致步骤：

准备个人中心左菜单组件
准备个人中心布局容器组件
准备个人中心首页组件
配置路由规则

落地代码：

准备个人中心左菜单组件

src/views/Member/Layout/components/member-aside.vue

<script setup lang="ts">
//
</script><template><div class="xtx-member-aside"><div class="user-manage"><h4>我的账户</h4><div class="links"><a href="javascript:;">个人中心</a><a href="javascript:;">消息通知</a><a href="javascript:;">个人信息</a><a href="javascript:;">安全设置</a><a href="javascript:;">地址管理</a><a href="javascript:;">我的积分</a><a href="javascript:;">我的足迹</a><a href="javascript:;">邀请有礼</a><a href="javascript:;">幸运抽奖</a></div><h4>交易管理</h4><div class="links"><a href="javascript:;">我的订单</a><a href="javascript:;">优惠券</a><a href="javascript:;">礼品卡</a><a href="javascript:;">评价晒单</a><a href="javascript:;">售后服务</a></div><h4>我的收藏</h4><div class="links"><a href="javascript:;">收藏的商品</a><a href="javascript:;">收藏的专题</a><a href="javascript:;">关注的品牌</a></div><h4>帮助中心</h4><div class="links"><a href="javascript:;">帮助中心</a><a href="javascript:;">在线客服</a></div></div></div>
</template><style scoped lang="less">
.xtx-member-aside {width: 220px;margin-right: 20px;border-radius: 2px;.user-manage {background-color: #fff;h4 {font-size: 18px;font-weight: 400;padding: 20px 52px 5px;border-top: 1px solid #f6f6f6;}.links {padding: 0 52px 10px;}a {display: block;line-height: 1;padding: 15px 0;font-size: 14px;color: #666;position: relative;&:hover {color: @xtxColor;}&.active {color: @xtxColor;&:before {display: block;}}&:before {content: '';display: none;width: 6px;height: 6px;border-radius: 50%;position: absolute;top: 19px;left: -16px;background-color: @xtxColor;}}}
}
</style>

准备个人中心布局容器组件

src/views/Member/Layout/index.vue

<script setup lang="ts">
import MemberAside from './components/member-aside.vue';
</script><template><div class="container"><MemberAside /><div class="article"><!-- 三级路由的挂载点 --><RouterView /></div></div>
</template><style scoped lang="less">
.container {display: flex;padding-top: 20px;.article {width: 1000px;}
}
</style>

准备中心首页组件：src/views/Member/Home/index.vue

<script setup lang="ts">
//
</script><template><div class="member-home"><h2>个人中心</h2></div>
</template>

准备订单组件：src/views/Member/Order/index.vue

<script setup lang="ts">
//
</script><template><div class="member-order"><h3>订单列表</h3></div>
</template>

配置路由规则

  {path: '/',component: Layout,children: [...{path: "/member",component: () => import("@/views/Member/Layout/index.vue"),children: [{path: "/member",component: () => import("@/views/Member/Home/index.vue"),},{path: "/member/order",component: () => import("@/views/Member/Order/index.vue"),},],},]},

新版路由-导航守卫

vue3小兔鲜商城项目学习笔记+资料分享09相关推荐

vue3小兔鲜商城项目学习笔记+资料分享06
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记购物车模块购物车功能分析 [外链图片转存失败,源站可能有防盗链机制, ...
vue3小兔鲜商城项目学习笔记+资料分享08
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记支付模块路由和组件任务目标: 完成支付页路由和组件 [外链图片转存 ...
vue3小兔鲜商城项目学习笔记+资料分享03
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记顶级类目目标:主要讲解开发时路由处理的要点,列表渲染部分自己课后实现 ...
vue3小兔鲜商城项目学习笔记+资料分享01
最近正在学习vue3小兔鲜,需要相关学习资料的可以点链接 https://docs.qq.com/doc/DUmhUVERtUHpLaG1a 下面试学习笔记项目起步项目预览地址小兔鲜儿商城:ht ...
vue3小兔鲜商城项目学习笔记+资料分享04
最近正在学习vue3小兔鲜, 下面是学习笔记详情模块目标:界面渲染部分我们快速准备,详情模块的重点都在组件封装. 基础布局和路由任务目标: 完成商品详情的基础布局和路由配置 [外链图片转存失败, ...
vue3小兔鲜商城项目学习笔记+资料分享05
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜, 下面是学习笔记登录模块路由与组件目标:登录组件在书写一级路由的时候已经准备,添 ...
vue3小兔鲜商城项目学习笔记+资料分享07
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 下面是学习笔记填写订单模块填写订单实现本节目标: 实现填写订单跳转填写订单页组件和路由 1)准备填写订单页 ...
web基础阶段的小兔鲜儿项目学习
小兔鲜儿 1. 所用素材 2. 项目文件介绍 3. index页面的基本骨架 4. 思路:先写外面大盒子和版心,由外往内写 5. 源码: 6. 代码的一些命名 1. 所用素材素材链接,点我跳转:ht ...
小兔鲜儿项目pc客户端前端静态页面
小兔鲜儿项目pc客户端前端静态页面一.效果图二.文件和目录准备新建index.html在根目录新建css文件夹保存网站的样式,并新建以下css文件: base.css:基础公共样式 commo ...

vue3小兔鲜商城项目学习笔记+资料分享09

会员中心模块

个人中心

个人中心-路由配置

个人中心-三级路由配置

新版路由-导航守卫

vue3小兔鲜商城项目学习笔记+资料分享09相关推荐

最新文章

热门文章

vue3小兔鲜商城项目学习笔记+资料分享09

会员中心模块

个人中心

个人中心-路由配置

个人中心-三级路由配置

新版路由-导航守卫 insertAdIfNeeded();

vue3小兔鲜商城项目学习笔记+资料分享09相关推荐

最新文章

热门文章

新版路由-导航守卫