收货人，包括手机号，以及所在城市详细地址，这一块信息我们也是存储到数据库的，并且也是当前用户的地址数据，所以说，我们先将地址这一块做一下。
1， 去 src/views/My.vue 添加如下内容
template:
<li @click="goPath">地址管理</li><ul><li @click="goPath">地址管理</li><li v-if="loginStatus" @click="loginOut">退出登录</li>
</ul>script:
// 进入地址管理
goPath() {this.$router.push('/path');
}
2, 去 src/router/index.js 添加如下路由
{path: "/path",name: "Path",component: () =>import("../views/Path.vue"),
}
去 src/views/Path,vue 创建文件，内容如下
<template><div class="path"><router-view></router-view></div>
</template><script>
</script>
4, 去 src/views/path/Path-index.vue 创建目录文件，配置子路由
{path: "/path",children: [{path: "/",name: "PathIndex",component: () =>import("../views/path/Path-Index.vue"),}],component: () =>import("../views/Path.vue"),
}
Path-index.vue 文件内容如下
<template><div class="path-index">11111</div>
</template><script>
</script><style>
</style>
访问http://localhost:8080/path 展示如下内容，表示子路由配置成功
5， 去 components/path/Header.vue 创建目录文件，内容如下
<template><header><i class='iconfont icon-fanhui' @click='$router.back()'></i><slot><span>我的地址</span></slot><i class="iconfont icon-kefu"></i></header>
</template><style lang='scss' scoped>
header{display: flex;justify-content: space-between;align-items: center;width: 100%;height: 44px;color: #fff;background-color: #b0352f;i {padding: 0 15px;font-size: 22px;}span {font-size: 18px;font-weight: 300;}
}
</style>
老师的
的地址页面布局 实现代码如下
1, src/views/My.vue<template><div class="my container"><!-- {{list}}<div> state的数据：{{ list }}</div> --><header><!-- {{userInfo}} --><div class="user-info" v-if="loginStatus"><img :src="userInfo.imgUrl" alt="" /><span>{{userInfo.nickName}}</span></div><div v-else class="login" @click="goLogin">登录/注册</div></header><section><ul><li @click="goPath">地址管理</li><li v-if="loginStatus" @click="loginOut">退出登录</li></ul></section><Tabbar></Tabbar></div>
</template><script>import {mapState,mapMutations} from 'vuex'import Tabbar from '@/components/common/Tabbar.vue'export default {name: "My",components: {// 挂载Tabbar},computed: {...mapState({// list: state => state.user.listloginStatus: state => state.user.loginStatus,userInfo: state => state.user.userInfo})},methods: {// 调用退出登录的方法...mapMutations(['loginOut']),// 在我的页面点击'登录/注册' 跳转到登录页面goLogin() {this.$router.push('/login');},// 进入地址管理goPath() {this.$router.push('/path');}}}
</script><style scoped lang="scss">header {display: flex;justify-content: center;align-items: center;width: 100%;height: 160px;background-color: #b0352f;.login {padding: 10px 30px;font-size: 16px;color: #fff;// background-color: rgba(255, 181, 0, 0.9);background-color: #F6AB32;border-radius: 6px;}.user-info {display: flex;flex-direction: column;justify-content: center;align-items: center;img {width: 60px;height: 60px;border-radius: 50%;}span {padding: 20px 0;font-size: 18px;color: #fff;// text-align: center;}}}section {flex: 1;overflow: hidden;ul li {padding: 15px;font-size: 16px;}}
</style>2, src/views/Path.vue
<template><div class="path"><router-view></router-view></div>
</template><script>
</script><style>
</style>3, src/views/path/Path-Index.vue<template><div class="path-index container"><Header></Header><section><ul><li><div><span>张三</span><span>15300935233</span></div><div><span class="active">[默认]</span><span>上海 上海市 长宁区 343434</span></div></li></ul><div class="add-path">添加地址</div></section><Tabbar></Tabbar></div>
</template><script>import Header from '@/components/path/Header.vue'import Tabbar from '@/components/common/Tabbar.vue'export default {name: "Path-Index",data() {return {//}},components: {Header,Tabbar}}
</script><style scoped lang="scss">section {display: flex;flex-direction: column;align-items: center;background-color: #f7f7f7;ul {width: 100%;li {padding: 10px 15px;width: 100%;margin: 6px 0;background-color: #FFFFFF;span {padding-right: 15px;font-size: 18px;}.active {color: #b0353f;}}}.add-path {margin-top: 30px;width: 150px;line-height: 40px;font-size: 18px;text-align: center;color: #fff;background-color: #b0352f;border-radius: 6px;}}::v-deep .tabbar {border-top: 2px solid #ccc;}
</style>4, src/components/path/Header.vue
<template><header><!-- 左 --><div @click="goBack"><i class="iconfont icon-a-huaban1fuben44"></i></div><!-- 中 --><div><slot><span>我的地址</span></slot></div><!-- 右 --><div><i class="iconfont icon-kefu"></i></div></header>
</template><script>export default {data() {return {//}},methods: {goBack() {// 返回上一页this.$router.back();},}}
</script><style scoped lang="scss">header {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 44px;color: #fff;background-color: #b0352f;i {padding: 0 18px;font-size: 24px;}span {font-size: 18px;font-weight: 300;}}
</style>5, src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";Vue.use(VueRouter);const routes = [{path: "/home",name: "Home",component: Home,},{path: "/",redirect: "/home", // 重定向}, {path: "/list",name: "List",component: () =>import("../views/List.vue"),}, {path: "/cart",name: "Cart",meta: {keepAlive: true, // 此组件需要被缓存},component: () =>import("../views/Cart.vue"),}, {path: "/my",name: "My",component: () =>import("../views/My.vue"),},{path: "/search",children: [{path: "/",name: "index",component: () =>import("../views/search/Search-index.vue"),}, {path: "/search/list",name: "Search-list",component: () =>import("../views/search/Search-list.vue"),}],component: () =>import("../views/Search.vue"),},{path: "/detail",name: "Detail",meta: {keepAlive: true, // 此组件需要被缓存},component: () =>import("../views/Detail.vue"),},{path: "/login",name: "Login",component: () =>import("../views/login/Login.vue"),},{path: "/userLogin",name: "UserLogin",component: () =>import("../views/login/UserLogin.vue"),},{path: "/register",name: "Register",component: () =>import("../views/login/Register.vue"),},{path: "/recovery",children: [{path: "/",name: "RecoveryIndex",component: () =>import("../views/recovery/RecoveryIndex.vue"),}, {path: "/recovery/btn",name: "RecoveryBtn",component: () =>import("../views/recovery/RecoveryBtn.vue"),}],component: () =>import("../views/recovery/Recovery.vue"),},{path: "/path",children: [{path: "/",name: "PathIndex",component: () =>import("../views/path/Path-Index.vue"),}],component: () =>import("../views/Path.vue"),}
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;
