一、路由配置一

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)
    })
  }
},

vue重构有赞商城- 路由配置

vue重构有赞商城- 路由配置

一、路由配置一

1. 创建router模版

2. 创建一级路由

2.1嵌套路由之路由重定向

2.2地址渲染到页面上

3.保存（分add和editl两种）数据

3.1当点击修改时候，需要把当前的list传进来，并且进入修改页面，需要对数据进行定位，所以在生命周期created时候就需要把数据调用。

推荐阅读更多精彩内容