下图部分打码（职业操守），点击产业时会有一个下拉并且底部会有一个黄色线条，选择对应的选项，跳转到对应产业的分类页面
这里导航栏是一个组件，中间内容也是一个组件，里面包含了1,2,3三个板块，是通过v-if判断显示，所以需要通过父传值到子组件中来判断是选择的是哪一个产业。而且这时候如果你刷新了的话，值会恢复到默认值，底部分黄线就会跑到第一个首页的下面，下面也是一样黄线会跑到1号下面 
下面我写了一个demo（样式没有过多修饰）： 
结构：
1：按钮一，二，三对应上面的产业的下拉选项
2：list 一，二，三对应下面的1,2,3三个板块
3：第一，第二，第三・・・等等就是所属板块的内容了
1：选择对应按钮，显示对应list内容
2：刷新后保存当前状态，显示的还是当前内容，.active样式也是一样
父组件：
<template> <div class="hello"> <button @click="goto(0)" :class="[msg === 0 ? 'active':'']">按钮一</button> <button @click="goto(1)" :class="[msg === 1 ? 'active':'']">按钮二</button> <button @click="goto(2)" :class="[msg === 2 ? 'active':'']">按钮三</button> <son :father = 'msg'></son> //这里的father是子组件中的props，msg是父组件的值 </div> </template> <script> import son from './test/test' export default { components: { son }, data () { return { msg: 0 } }, methods: { goto (val) { this.msg = val sessionStorage.setItem('findex', val) } }, mounted () { if (sessionStorage.index) { this.msg = parseInt(sessionStorage.findex) } else { this.msg = 0 } } } </script> <style> .active{ background: red; } </style>注释：
- 添加子组件并且命名
son :father是子组件中的props,msg是父组件data的值需要传给子组sessionStorage.setItem('findex', val)用来存储当前选中的状态created实例创建后：判断是否有缓存，如果有就获取缓存中的findex保存当前状态
子组件：
<template> <div class="test"> <h1 @click="change(0)" :class = "[index === 0 ? 'active':'']">list 一</h1> <h1 @click="change(1)" :class = "[index === 1 ? 'active':'']">list 二</h1> <h1 @click="change(2)" :class = "[index === 2 ? 'active':'']">list 三</h1> <div class="list" v-if="index === 0"> <ul> <li><a >第一个</a></li> <li><a >第二个</a></li> <li><a >第三个</a></li> </ul> </div> <div class="list" v-if="index === 1"> <ul> <li><a >第4个</a></li> <li><a >第5个</a></li> <li><a >第6个</a></li> </ul> </div> <div class="list" v-if="index === 2"> <ul> <li><a >第7个</a></li> <li><a >第8个</a></li> <li><a >第9个</a></li> </ul> </div> </div> </template> <script> export default { props: ['father']， data () { return { index: this.father } }, methods: { change (val) { this.index = val sessionStorage.setItem('index', this.index) console.log(sessionStorage) } }, created () { if (sessionStorage.index) { this.index = parseInt(sessionStorage.index) } }, watch: { father (val) { this.index = this.father sessionStorage.setItem('index', this.father) } } } </script> <style scoped> .active{ border:1px solid #000; color: #000 !important; } h1{ display: inline-block; margin-right: 20px; } </style>注释：
- 子组件注册
props使我们可以在组件上注册一些自定义特性 father是子组件中的props的属性- 通过
sessionStorage.setItem('index', this.father)同父组件一样用来存储当前选中的状态 created实例创建后：判断是否有缓存，如果有就获取缓存中的index保存当前状态
-change事件每次点击之后也通过sessionStorage保存当前选中的状态
至此效果以实现，刷新也可以保存当前状态
刷新状态： 
加载完毕： 