vue80-100

-动态路由

1. 第一步从后端取回列表，布局
2. 列表绑定事件动态路由
3. 前端获取id
4. 发请求给后端，返回相应接口
5. 布局页面

path: "/detail/ :myid’,
动态二级路由

this. $router.push( `/detail/${id}`)

有r的拿到了整个路由对象

created i
//只拿到当前匹配的路由
console.log( 'created ', this.$route)}

命名路由

{
name: 'kerwinDetail',//命名路由
path: "/detail/ :id',//动态二级路由
component: Detail
},

//2-通过命名路由跳转
this.$router.push({
name: "kerwinDetail',
params: {
id
})

路由模式

全局路由拦截

router.beforeEach((to, from，next) =>{
                 //跳转，目标，下一步   
console.log(to)
next()
})

-局部路由拦截

// 1．获取query字段
// console.log(this.$route.query.redirect)//2．跳转到当时想要跳的页面去this.$router.push(this.$route.query.redirect)}， 0)

-路由懒加载

path: '/order',
component: ()=>import("@/views/"),meta: {
isKerwinRequired: true

回调函数

import Center from '@/views/Centerl'
//之前的要删掉

-rem回顾

3.路由原理:
(1)hash路由==> location.hash切换
window.onhashchange 监听路径的切换

(2)history路由==> history.pushState切换
window.onpop
state 监听路径的切换

rem

//fontsize计算
document.documentElement.style.fontsize=document.documentElement.
clientwidth/750 * 16 +'px'

-swiper组件-1

这样就不会报错

小计

解决后端跨域方式有三种
jsonp
反向代理
字段

---

正在热映渲染
模块

<li v-for="data in datalist" :key="data.filmId"
@click="handlechangePage(data.filmId)">
<img :src="data.poster"/>
<div>
<div class="title">{idata.name}}</div>
<div class="content">
<div>观众评分:<span style="color:red;">{{data.
grade}}</span></div>


<div>
{{data.nation}} | {{data.runtime}}分钟</div>
</div></div></li>

模块

---

axios封装

import axios=from 'axios')
function http({
return axios({
url:
'https: //m.maizuo.com/gateway?cityId=440100&pageNum=1&pagesize=10&type=1&k=5196770',
headers: {
'X-Client-Info' :
'{"a": "3000" , "ch" : "1002" , "v": "5.0.4",
"e" : "1606697250632532718583809", "bc": "440100"}',
'X-Host' : 'mall.film-ticket.film.list'
}
})
export default {
httpForDetail
,httpForList
}

// 2-对于数据请求的封装

// 2-对于数据请求的封装
import axios from 'axios'
const http = axios.create({
baseURL:'https://m.maizuo.com',
timeout: 10000,
headers: {
'x-Client-Info':
'{"a" : "3000" , "ch" : "1002" , "v": "5.0.4",
"e" : "1606697250632532718583809" , "bc" : "440100"}'
}
})
export default http

//在发请求之前拦截-- showLoading
//在成功后拦截-- hideLoading

---

<template>
<div v-if="filmInfo">
<!-- <img :src="filmInfo.poster" /> -->
<div :style="{
backgroundImage : 'url('+filmInfo.poster+')'
}" class="poster"></div>
<div class="content">
<div>{{filmInfo.name}}</div>
<div class="content-bottom">
<div>{{filmInfo.category}}</div>
</div>
</div></div></template>

时间戳转换

详情页面加载

<div class="detail-text" style="height : 30px; line-height : 15px;"
 :class="isHidden? " 'hidden': ' ' ">{{filmInfo.synopsis}}</div>


<div style="text-align:center; "><i class="iconfont
icon-moreunfold" @click="isHidden=!isHidden"></i></div>

轮播

<div>
<div>演职人员</div><detail-swiper>
<detail-swiper-item>1111</detail-swiper-item>
<detail-swiper-item>2222</detail-swiper-item>
<detail-swiper-item>3333</detail-swiper-item>
</detail-swiper>
</div>

找swiper演示

mounted () {
// console.log( "mounted")
new Swiper( '.kerwin ',{
slidesPerView:3,
spaceBetween: 30,
freeMode: true
})

<detail-swiper-item
v-for="(data,index) in filmInfo.actors"
:key="index"
>
<div
:style="{
backgroundImage: 'url(' + data.avatarAddress + ')',
}"
class="avatar"
>
</div>
<div style="text-algin:center;font-size:12px">
{{ data.name }}</div>
<div style="text-algin:center;font-size:12px">
{{ data.role }}</div>
</detail-swiper-item>
</detail-swiper>