Footer 多页面应用跳转

<!-- HTML 结构 -->
<ul>
      <li>
          <a href="index.html">
              <i class="icon-index"></i>
              <div>首页</div>
          </a>
      </li>
      <li>
          <a href="category.html">
              <i class="icon-category"></i>
              <div>分类</div>
          </a>
      </li>
      <li>
          <a href="cart.html">
              <i class="icon-cart"></i>
              <div>购物车</div>
          </a>
      </li>
      <li>
          <a href="member.html">
              <i class="icon-user"></i>
              <div>我的</div>
          </a>
      </li>
</ul>

页面嵌套的思路：
1、对底部导航数据的配置
---- 配置数据 （注入数据 识别数据）
2、页面嵌套 for循环 添加数据
3、焦点状态更改+页面跳转【难点】
---- 这里不能直接用click跳转页面 要引入插件 这就是单页面应用和多页面也应的区别

//单vue文件必须这样写
export default{
  data(){
    return{ }
  }
}
// 官方文档解释 如果是单页面应用 可能会在多个地方使用单vue文件
// 多个地方的单vue文件会共享同一个数据 但不允许这样
// 非要共享同一个数据的时候 要自己处理 如果不用对象返回数据的形式 就会报错
// 为了保证每一个组件数据源的唯一性 就要这么处理

//页面嵌套

<ul>
      <li v-for="(list,index) in navConfig"
          :class="{active:curIndex==index}"
      >
        <a :href="list.href">
          <i :class="list.icon"></i>
          <div>{{list.name}}</div>
        </a>
      </li>
</ul>

//JS

  // qs.parse('?index=1&name=tony') 这个是插件 要去掉这个问号‘？’
  let {index} = qs.parse(location.search.substr(1)) // 去掉‘？’的写法
  //{ index } = xxx 对象的解构赋值
  // 这样就可以拿到index  这里返回的是 string 类型

  let navConfig = [ // 配置数据
    {
      name:'首页',
      icon:'icon-home',
      href:'index.html'
    },
    {
      name:'分类',
      icon:'icon-category',
      href:'category.html'
    },
    {
      name:'购物车',
      icon:'icon-cart',
      href:'cart.html'
    },
    {
      name:'我的',
      icon:'icon-user',
      href:'member.html'
    }
  ]
  
  export default {
    data(){ // data 是个方法 在方法内部返回一个对象
      return{
        navConfig, // 注入数据
        curIndex:parseInt(index) || 0 // 识别数据
        //因为返回的是string 类型 所以这里要做一下转换 如果没找到或者没参数 就给个0
      }
    },
  methods:{
      changeNav(list,index){
        //this.curIndex = index 不需要做了
        //页面跳转
        location.href = `${list.href}?index=${index}`
        //第三方qs跳转插件 下载安装 qs ==> yarn add qs 安装后引入qs
      }
  }
}