一、路由配置一
1. 创建router模版
html:（个人中心页面member.html）
<body class=" ">
<div id="ap">
<router-view>
</router-view>
</div>
</body>
js:(member.js)
let routes = [{
path:'/', //根路由
components: require('./components/member.vue')
},{
path:'/address',
components: require('./components/address.vue'),
children:[{ //嵌套路由
path: '',
// components: require('./components/all.vue')
redirect:'all'
},{
path: 'all',
name: 'all',
components: require('./components/all.vue')
},{
path: 'form',
name: 'form',
components: require('./components/form.vue')
},]
}]
2. 创建一级路由
-
adress.vue组件的入口在member.html，在页面做相应的路由导航 - 路由导航有两种方式，1、router-link ， 2、编程式导航
- 在
router-link之前，需要在路由的配置
let routes = [{
path:'/', //根路由
components: require('./components/member.vue')
},
{
path:'/address',
components: require('./components/address.vue')
}]
<router-link to="/address" target="_self">
<p class="title-info c-black font-size-14">收货地址管理</p>
</router-link>
2.1嵌套路由之路由重定向
2.2地址渲染到页面上
- 拿到数据
addressData:require('js/address.json') - 渲染数据
<div class="select-group">
<select class="js-province-selector" v-model="provinceValue">
<option value="-1">选择省份</option>
<option :value="p.value" v-for="p in addressData.list" >{{p.label}}</option>
</select>
<select class="js-city-selector" v-model="cityValue">
<option value="-1">选择城市</option>
<option :value="c.value" v-for="c in cityList" >{{c.label}}</option>
</select>
<select class="js-county-selector" name="area_code" data-code="" v-model="districtValue">
<option value="-1">选择地区</option>
<option :value="d.value" v-for="d in districtList" >{{d.label}}</option>
</select>
</div>
</div>
- 监听数据
watch: {
provinceValue(val){
if(val===-1)return
let list = this.addressData.list
let index = list.findIndex(item=>{
return item.value === val
})
this.cityList = list[index].children
this.cityValue = -1
this.districtValue = -1
},
cityValue(val){
if(val===-1)return
let list = this.cityList
let index = list.findIndex(item=>{
return item.value === val
})
this.districtList = list[index].children
this.districtValue = -1
}
}
-
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
3.保存（分add和editl两种）数据
add(){
//需要做非空和合法性校验
let {name,tel,provinceValue,cityValue,districtValue,address} = this
let data = {name,tel,provinceValue,cityValue,districtValue,address}
if(this.type==='add'){
Address.add(data).then(res=>{
this.$router.go(-1)
})
}
if(this.type==='edit'){
data.id = this.id
Address.update(data).then(res=>{
this.$router.go(-1)
})
}
},
3.1当点击修改时候，需要把当前的list传进来，并且进入修改页面，需要对数据进行定位，所以在生命周期created时候就需要把数据调用。
网友评论