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