使用HBuilderX-普通项目之vue-cli默认项目开发前端（四-二）

十五、关于如何局部覆盖element-ui的默认样式

在需要更改的组件里新增一个style标签【重点：不要加scoped】，然后直接获取class设置样式就可以了，class自己去浏览器里右键审查元素可得到。

在获取到的样式里加上能限制范围的父层选择器，不然就变成全局样式了。

scoped的作用：参考《如何局部覆盖element-ui的默认样式》

vue中的scoped属性的效果主要通过PostCSS转译实现。

PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中的dom。

scoped使得样式只作用于含有该属性的dom——组件内部dom。

十六、vue中跳转至外部链接

vue中跳转至外部链接使用(window.location.href = 'url')，举例如下：

goIndex(path) {
	//判断path中是否含有https,含有跳转至外部链接,不含有则进行路由跳转
	path.indexOf('https') != -1 ? (window.location.href = path) : this.$router.push({ path: path });
},

十七、解决vue中刷新时element-ui中NavMenu 导航菜单总是定位至首页

刷新时总是定位至首页是因为:default-active="activeIndex"，当前激活菜单的 index被设置成了首页。

解决办法：

created() {
		//刷新页面，导航栏自动定位到首页问题
		if(window.location.href.indexOf('about')!=-1){
			this.activeIndex='关于我们';
		}else if(window.location.href.indexOf('contact')!=-1){
			this.activeIndex='联系我们';
		}else{
			this.activeIndex='首页';
		}
},

十八、keep-alive之使只有第一次进入和强制刷新时请求页面数据，其他时候使用缓存数据

router目录下的index.js中添加元信息，keepAlive: true 表示页面需要被缓存

{
        path: '/about',
	component: About,
	meta: {
		keepAlive: true // 需要被缓存
	}
},
{
	path: '/contact',
	component: Contact,
	meta: {
		keepAlive: true // 需要被缓存
	}
},

index.vue 中在 <router-view/>外层包裹keep-alive，在这里，index是父组件，并不是app.vue，上面的about和contact是index的子组件。

<template>
	<div class="home">
		<home-header :Menus="Menus"></home-header>
		<!-- 最大缓存数量5个组件，超出5个的销毁最后使用的组件 -->
		<keep-alive max="5">
			<router-view></router-view>	
	    </keep-alive>	
	</div>
</template>

十九、点击底部footer组件的菜单按钮，导航栏header组件自动激活相应菜单的解决方案

情况是，底部footer组件中定义了一组与顶部header组件一致的导航菜单，点击底部footer上的菜单时，vue-router链接的内容区域发生了改变，但是顶部header组件仍旧定位在首页上。

原因是，vue组件实例的复用。

解决办法：在header组件中添加watch监听。

watch: {
	//组件复用解决办法，点击底部footer组件的菜单按钮，导航栏菜单自动激活相应菜单
	'$route': function(to, from) {
		console.log("watch",to.path);
		if(to.path.indexOf('about')!=-1){
			this.activeIndex='关于我们';
		}else if(to.path.indexOf('contact')!=-1){
			this.activeIndex='联系我们';
		}else{
			this.activeIndex='首页';
		}
	}
},

解决办法的理论依据来自于vue官方《响应路由参数的变化》一章，内容如下：

二十、eslint-js报错error  'from' is defined but never used  no-unused-vars

我推荐的解决办法是，那里报错就修改哪里，报的是from定义了但从未使用过的错误，那就找到这个from删除掉它。

其他解决办法，推荐参考《vue引入导航守卫报错error: 'to' is defined but never used (no-unused-vars)》

二十一、 报错Unexpected side effect in "mode" computed property  vue/no-side-effects-in-computed-properties

不要在计算属性内直接修改data里面的数据，eslint会报 no-side-effects-in-computed-properties 错误，如果非要改可以写在一个函数里，然后在计算属性里调用该函数,就不会报错了。

参考《关于computed使用时报no-side-effects-in-computed-properties错误》