1.Q:router 默认配置下 地址栏 尾部会添加# 地址栏取参数时需要注意
A:
routes:[
{
path: '/',
name: 'homeLink',
component: home,
meta: {
keepAlive: false,
title:"快捷登录"
}
}
]
try{ //这样即使报错也不会阻塞下面的代码
let hrefArr = window.location.href.split('?');
let paramsArr = hrefArr[1].split('&');
let fct = paramsArr[0].split('=')[1];
let fcid = paramsArr[1].split('=')[1];
let finalFcid = fcid.split('#')[0];
sessionStorage.setItem('fct',fct);
sessionStorage.setItem('fcid',finalFcid);
}catch(e){
console.log('e',e)
}
2.Q:设置每个页面的title
A:
router.beforeEach((to, from, next) => {
if (to.meta.title) {//如果设置标题，拦截后设置标题
document.title = to.meta.title
}
next()
})
3.Q:不同页面设置
A:App.vue
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
Home.vue
<div>
<div class="router-wrap">
<router-link to="/goods" tag="div" class="router-box router-one">在售商品</router-link>
<router-link :to="{name:'cinemaLink',query:{}}" tag="div" class="router-box router-two">影院列表</router-link>
</div>
<footer></footer>
</div>
4.Q：返回上个页面记录滚动位置
A:
onScroll(e) { //这是当时引入一个加载更多的一个组件里面的方法，如有需要私聊我
if (!this.enableInfinite || this.infiniteLoading) {
return
}
let outerHeight = this.$el.clientHeight
let innerHeight = this.$el.querySelector('.inner').clientHeight
let scrollTop = this.$el.scrollTop
this.$emit('childScrollTop',scrollTop)
}
activated(){ //这个主要实现的是在影院列表滚动到一定位置点击进入影院详情再返回来现实的还是刚才那个位置
let yoScroll = document.getElementById('yoScroll');
if (yoScroll && this.scrollTop) {
yoScroll.scrollTop = this.scrollTop;
}
},
路由中配置
{
path: '/cinema',
name: 'cinemaLink',
component: cinema,
meta: {
keepAlive:true, //主要是这个
title:"影院列表"
}
},
5.Q:vue根据从不同页面进入，做不同操作
A:
beforeRouteEnter(to,from,next){
next(vm=>{
if(from.name=="cinemaLink"){
vm.$refs['input'].focus();
}
})
}
6.Q:input 框自动聚焦
A:
<input type="text" name="search" placeholder="搜索影院名称" class="search-input" v-model="inputCinema" @focus="handleInputFocus" ref="input">
vm.$refs['input'].focus();
