老师我给我的地址绑定了click事件，点击报错如下
来源：1-5 项目作业
慕瓜0126554
2021-09-18 17:01:43
代码如下：
<template>
<div class="mypage">
<div class="header">
<div class="header__text">
<img src="" class="header__text__img">
<div class="header__text__label">
热心市民李先生
<span class="header__text__tp"></span>
</div>
<div class="header__text__content">ID: 1069643013</div>
<div class="header__text__content">
<span class="header__sp">
<div class="header__sp__name">红包</div>
<div class="header__sp__number">218</div>
</span>
<span class="header__sp">
<div class="header__sp__name">红包</div>
<div class="header__sp__number">218</div>
</span>
<span class="header__sp">
<div class="header__sp__name">红包</div>
<div class="header__sp__number">218</div>
</span>
<span class="header__sp">
<div class="header__sp__name">红包</div>
<div class="header__sp__number">218</div>
</span>
</div>
</div>
<div class="header__label"></div>
</div>
<div class="contents">
<div class="content">
<span class="content__icon iconfont red"></span>
<span class="content__detail">我的钱包</span>
<span class="content__rt iconfont"></span>
</div>
<div class="content" @click="handleAddress">
<span class="content__icon iconfont blue"></span>
<span class="content__detail">我的地址</span>
<span class="content__rt iconfont"></span>
</div>
<div class="content">
<span class="content__icon iconfont purple"></span>
<span class="content__detail">客服与帮助</span>
<span class="content__rt iconfont"></span>
</div>
</div>
</div>
<Docker :currentIndex='3'/>
</template>
<script>
import {useRouter} from 'vue-router'
import Docker from '../../components/Docker'
const myAddress=()=>{
const router=useRouter()
const handleAddress=()=>{
router.push({name:'address'})
}
return {handleAddress}
}
export default {
name:'My',
components: { Docker },
setup(){
const {handleAddress}=myAddress()
return {handleAddress}
}
}
</script>
<style lang="scss" scoped>
.mypage{
background: #e0dcdc;
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0.9rem;
right: 0.1rem;
padding: 0 0.18rem 0.1rem 0.18rem;
}
.header{
position: relative;
height: 2.5rem;
background-size: 100% 2.5rem;
background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
background-repeat: no-repeat;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 40%;
&__text{
position:absolute;
top: 50%;
left: 10%;
width: 80%;
height: 2rem;
background: #fff;
border-radius: .08rem;
&__img{
position: relative;
top: -.47rem;
left: 32%;
width: .94rem;
height: .94rem;
border-radius: 50%;
background: olivedrab;
}
&__label{
font-size: .24rem;
color: #262628;
text-align: center;
line-height: .36rem;
margin-top: -.4rem;
}
&__tp{
width: 0.35rem;
height: 0.15rem;
background-image: linear-gradient(180deg, #BEE700 0%, #8ACA00 100%);
border-radius: 100px;
}
&__content{
text-align: center;
}
}
&__sp{
margin-top: 0.25rem;
display: inline-block;
width: 20%;
&__name{
font-size: .12rem;
color: #C1C0C9;
text-align: center;
}
&__number{
font-size: .2rem;
color: #262628;
text-align: center;
}
}
}
.contents{
margin-top: 1rem;
padding-bottom: .2rem;
width: 80%;
border-radius: .08rem;
background: #fff;
margin-left: 10%;
}
.content{
margin-left: 2%;
padding: .17rem 0;
display: flex;
&__icon{
width: .22rem;
height: .22rem;
line-height: .22rem;
color: #fff;
border-radius: .08rem;
text-align: center;
}
&__detail{
margin-left: .12rem;
font-size: .14rem;
color: #262626;
}
&__rt{
flex: 1;
text-align: right;
margin-right: .2rem;
}
}
.red{
background: #ED4A47;
}
.blue{
background: #32C5FF;
}
.purple{
background: rgba(144,19,254,0.92);
}
</style>
<template>
管理收货地址
</template>
<script>
export default {
name:'address'
}
</script>
<style lang="scss" scoped>
</style>
1回答
-
好帮手慕慕子
2021-09-18
同学你好，猜测是因为点击按钮跳转到address页面时，没有设置对应的路由导致报错。
建议在router/index.js文件中添加路由配置。示例：
祝学习愉快~
0
相似问题