vue实现导航栏效果（选中状态刷新不消失）(2)

日期：2020-05-12 栏目：程序人生浏览：次

但是电脑调试的时候会发现，刷新浏览器后，选中的状态就会消失。（你可能会觉得用户一般不会在手机端刷新页面/或者直接输入路由跳转到相应的页面，如果要追求完美的，请继续往下看）比如，我选中的状态是创业直播：

当我点击刷新页面后，就会返回到默认的首页状态，如下。

解决办法：

每次点击切换底部导航的时候，把选中的状态存入sessStorage里边。在mounted钩子里把这个状态取出来赋值给这个isSelect变量就可以实现选中状态不消失了。

mounted () { 
 this.isSelect = sessionStorage.getItem('isSelect') 
 }, 
 methods: { 
 selectNav (title) { 
 this.isSelect = title 
 sessionStorage.setItem('isSelect', this.isSelect) 
 } 
 }

经过测试，新的问题又发现了，比如当前在“创业直播”这个状态上，我在浏览器上直接输入“http://localhost:8080/#/shop”，这样用上面的办法就解决不了问题了。最好的办法就是和路由绑定无论点击，还是浏览器上输入路由改变，都正确显示选中状态。

在router/index.js里边映射组件路由时，加上对应的name

routes: [ 
 { 
 path: '/', 
 redirect: '/index' 
 }, 
 { 
 path: '/index', 
 name: '首页', 
 component: index 
 }, 
 { 
 path: '/live', 
 name: '创业直播', 
 component: live 
 }, 
 { 
 path: '/my', 
 name: '我的', 
 component: my 
 }, 
 { 
 path: '/shop', 
 name: '店铺', 
 component: shop 
 } 
]

mounted钩子里边的代码改为：

mounted () { 
 this.isSelect = this.$route.name 
 },

methods方法里边的代码修改为

4、手机端一般要求自适应各种大小的手机端屏幕，你可以选择用媒体查询，或者js控制font-size。这里我用的是js控制font-size,在index.html引入下面的js。

 * rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem，32px = .32rem】 
 */ 
!function (window) { 
 
 /* 设计图文档宽度 */ 
 var docWidth = 750; 
 
 var doc = window.document, 
 docEl = doc.documentElement, 
 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; 
 
 var recalc = (function refreshRem () { 
 var clientWidth = docEl.getBoundingClientRect().width; 
 
 /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */ 
 docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; 
 
 return refreshRem; 
 })(); 
 
 /* 添加倍屏标识，安卓为1 */ 
 docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); 
 
 if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { 
 /* 添加IOS标识 */ 
 doc.documentElement.classList.add('ios'); 
 /* IOS8以上给html添加hairline样式，以便特殊处理 */ 
 if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) 
 doc.documentElement.classList.add('hairline'); 
 } 
 
 if (!doc.addEventListener) return; 
 window.addEventListener(resizeEvt, recalc, false); 
 doc.addEventListener('DOMContentLoaded', recalc, false); 
 
}(window);

转载注明出处：http://www.heiqu.com/1370.html

vue实现导航栏效果（选中状态刷新不消失）(2)

相关推荐