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