vue学习4

全局路由拦截

获取登录信息并保存登录状态的功能

在全局前置首尾中调用接口获取用户信息并保存到Vuex中,
在需要登录校验组件的前置守卫中去获取Vuex中的用户信息,有的话正常加载,没有的话跳转到登录

router.beforeEach((to,form,nexxt)=>{
	console.log(to)
	if(...){
		if(通过){
			next()
		}else{
			next('/login')
		}
	}else
		next()
})

router.beforeEach((to,form,next)=>{
	console.log(to)
	if(to.meta.isKerwinRequired){
		if(localStorage.getItem('token')){
			next()
		} else{
			next('/login')
	}else{
		next()
	}
})

路由懒加载

整个网页默认时刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块
按需要去加载路由对应的资源,提高首屏加载速度

将路由相关的组件不再直接导入,而是改写成异步组件的写法,只有当函数被调用的时候采取加载对应的组件内容

const UserDetails=()=>import('./views/UserDetails.vue')

const router=creatRouter({
	routes:[{path:'/users/:id',component:UserDetails}],
}]

路由原理

location.hash储存的是路由的地址、可以赋值改变其URL的地址.而这会触发hashchange事件
而通过window.addEventListener监听hash值然后去匹配对应的路由、从而渲染页面的组件

swiper组件

import Swiper from 'wsiper/bundle'

const swiper = new Swiper

选项卡封装

封装:
1、创建一个components目录,并在目录下创建对应的组件.vue文件
2、把对应的标签页面内容放进对应的组件.vue中,不要忘了加上script和style内容
3、在index.vue文件中通过import…form…引入对应的组件
4、在标签页中放组件即<el-tab-pane label="User" name="first"><组件名></el-tab-pane>

思路:
1、现在index.vue中写,写完布局后再封装组件,这种情况下需要注意script和style中写上对应tabs页面的注释,防止要封装组件了却不知道这个函数是哪个组件
2、直接在组件中进行编写,写完后在引入到主文件中,这样的话需要注意布局对index.vue的影响

电影导航组件

<template>
	<div>
		<router-link to="/films/nowplaying" custom v-slot="{navigate,inActive}">
			<li @click="navigate" :class="isActive?'kerwinactive':''">
				正在热映
			</li>
		<router-link>
		<router-link to="/firms/comingsoon" custom v-slot="{navigate,isActive}">
			<li @click="navigate" :class="isActive ? 'kerwinactive':''">
				即将上映
			</li>
		<router-link>
	</div>
<template>

正在热映获取数据

mounted (){
	axios({
		url:'https://m.maizuo.com/gateway?cityId=440100&pageNum=1&
		pageSize=10&type=1&k=5196770',
		headers:E
		'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4",
		"e":"1606697250632532718583809","bc":"440100"}',
		'X-Host':'mall.film-ticket.film.list'
	}
}).then(res =>{
	console.log(res.data)
}）

axios封装

mounted () {
	http({
		url:
			'/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&
			k=5196770',
		headers:
			'X-Host':'mall.film-ticket.film.list'
		}).then((res)=>{
			console.log(res.data.data.films)
			this.datalist = res.data.data.films
	}）
}

详情渲染

<template>
	<div v-if="filmInfo">
		{{filmInfo.name}}
		{{filInfo.filmType.name}}
	</div>
</template>


export default {
	data () {
		return {
		filmInfo:nul1
		}
	}
}

详情轮播

new Swiper('.kerwin',{
	slidesPerView: 3,
	spaceBetween: 30,
	freeMode: true
}	

<detail-swiper-item v-for="(data, index) in filmInfo.actors" :key="index">
<divI :style="{ backgroundImage: 'url('+data.avatarAddress}"')'，class="avatar">

详情Header-组件

Vue.directive('scroll', {
	inserted (el) 
	el.style.display = 'none'

window.onscroll =()=>{
	if ((document.documentElement.scrollTop || document.body.scrollTop) > 50){
		el.style.display = 'block'
	} else {
		el.style.display = 'none'	
	}
}）

//销毁执行的
unbind(){
	window.onscroll= null
	}

影院组件渲染

<div>
	<ul>
		<li v-for="data in cinemaList" :key="data.cinemaId">
			<div class="left">
				<div class="cinema_name">{{ data.name }}</div>
				<div class="cinema_text">{{ data.address }}</div>
			</div>
			<div class="right cinema_name">
				<div style="color:red">￥{{data.lowPrice/100 }}起</div>
			</div>
		</li>
	</ul>
</div>