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