vue

vue router

缓存路由组件

1. 作用 ：让不展示的路由组件保持挂载，不被销毁

2. 具体编码：

    // 缓存一个
    <keep-alive include="News">   // include 里写组件
      <router-view></router-view>
    </keep-alive>
   
    // 缓存多个
    <keep-alive :include="['News','Message']">
      <router-view></router-view>
    </keep-alive>
   

生命周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

2. 具体名字：

   • activated 路由组件被激活时触发
   • deactivated 路由组件失活时触发

   <template>
   	<h1 :style="{ opacity }">欢迎学习Vue</h1>
   </template>
   
   <script>
   	export default {
   	name: "News",
   	data() {
   		return {
     			opacity: 1,
   		};
   	},
   activated() {
   	this.timer = setInterval(() => {
         	this.opacity -= 0.01;
     		if (this.opacity <= 0) this.opacity = 1;
   	}, 16);
   },
   deactivated() {
   	clearInterval(this.timer);
   },
   };
   </script>
   

路由守卫

1. 作用:对路由进行权限控制
2. 分类:全局守卫、独享守卫、组件内守卫

全局守卫:

//全局前置守卫: 初始化时执行、每次路由切换前执行
router.beforeEach((to, from,next) => {
	console.log('beforeEach',to,from )
	if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
		if(localstorage.getItem('school') ===atguigu'){ //权限控制的具体规则
				next() / /放行
		}else{
			alert(‘’暂无权限查看)
		}
	}else(
		next() //放行
	}
	
//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue test'
	}
}

独享守卫:

beforeEnter(to,from,next ){
	console.log( 'beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			(next()
		}else{
			alert('暂无权限查看')
		}
	else{
		next()
	}
}

组件内守卫

//进入守卫:通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},

//离开守卫:通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

路由器的两种工作模式

1. 对于一个url来说，什么是hash值? -#及其后面的内容就是hash值
2. hash值不会包含在 HTTP 请求中，即: hash值不会带给服务器
3. hash模式:
   • 地址中永远带着#号，不美观
   • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法.
   • 兼容性较好
4. history模式:
   • 地址干净，美观
   • 兼容性和hash模式相比略差
   • 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

Vue UI组件库

移动端常用 UI组件库

1. Vant https://youzan.github.io/vant
2. Cube Ulhttps://didi.github.io/cube-ui
3. Mint Ulhttp://mint-ui.github.io

PC端常用 UI组件库

Element Ul https://element.eleme.cn
2. IView Ul https://www.iviewui.com