全局路由拦截
获取登录信息并保存登录状态的功能
在全局前置首尾中调用接口获取用户信息并保存到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>