html中多个网页的跳转页面,Html --- Footer 多页面应用跳转

• 首页

• 分类

• 购物车

• 我的

页面嵌套的思路：

1、对底部导航数据的配置

---- 配置数据 (注入数据 识别数据)

2、页面嵌套 for循环 添加数据

3、焦点状态更改+页面跳转【难点】

---- 这里不能直接用click跳转页面 要引入插件 这就是单页面应用和多页面也应的区别//单vue文件必须这样写

export default{

data(){

return{ }

}

}

// 官方文档解释 如果是单页面应用 可能会在多个地方使用单vue文件

// 多个地方的单vue文件会共享同一个数据 但不允许这样

// 非要共享同一个数据的时候 要自己处理 如果不用对象返回数据的形式 就会报错

// 为了保证每一个组件数据源的唯一性 就要这么处理//页面嵌套

• :class="{active:curIndex==index}"

  >

  {{list.name}}

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

}

}

}