- 在 router/index.js 中有两个页面。
export default new Router({
mode: 'history',
routes: [
{
path: '',
redirect: '/pc_index'
},
{
path: "/pc_index", // pc端首页
name: PcIndex,
component: resolve => require(['@/views/PCViews/pcIndex.vue'], resolve),
},
{
path: '/m_index', // 手机端首页
name: MIndex,
component: resolve => require(['@/views/MViews/mIndex.vue'], resolve),
}
]
})
- 在 App.vue 的 mounted 和methods方法中对设置进行判断,如下:
mounted() {
var that = this;
window.addEventListener("resize", that.handleSize);
that.handleSize();
},
methods: {
handleSize() {
if (this._isMobile()) {
this.$router.replace("/m_index");
} else {
this.$router.replace("/pc_index");
}
},
_isMobile() {
let flag = navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
return flag;
},
},
- pcIndex.vue
<template>
<div id="pcIndex">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: "pcIndex",
props: {},
provide() {
return {
reload: this.reload,
};
},
data() {
return {
isShowLoading: false,
isRouterAlive: true,
cascaderTimmer: "",
};
},
watch: {
$route(route) {
// if you go to the redirect page, do not update the breadcrumbs
// console.log(route.path);
},
},
mounted() {
const that = this;
//给window添加一个滚动滚动监听事件
window.addEventListener("load", that.cascaderTimmerChange);
this.$router.afterEach((to, from, next) => {
window.scrollTo(0, 0);
});
document.onmousedown = function (event) {
if (window.event && !event) {
event = window.event;
}
var ref = event.target || event.srcElement;
if (ref.tagName == "IMG") {
if (event.button == 2 || event.button == 3) {
alert("对不起,本网站不提供图片右键功能,谢谢您的理解和支持!");
return false;
}
}
};
},
methods: {
cascaderTimmerChange() {
//点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡,暂时想不到好方法来触发。
//这种比较耗性能,暂时想不到其他的,能实现效果了。
this.cascaderTimmer = setInterval(function () {
document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
el.onclick = function () {
if (this.previousElementSibling)
this.previousElementSibling.click();
};
});
}, 1000);
},
reload() {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
});
},
// 点击图片回到顶部方法,加计时器是为了过渡顺滑
backTop() {
const that = this;
let timer = setInterval(() => {
let ispeed = Math.floor(-that.scrollTop / 5);
document.documentElement.scrollTop = document.body.scrollTop =
that.scrollTop + ispeed;
if (that.scrollTop === 0) {
clearInterval(timer);
}
}, 16);
},
// 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏
scrollToTop() {
const that = this;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
if (that.scrollTop > 60) {
that.btnFlag = true;
} else {
that.btnFlag = false;
}
},
},
destroyed() {
// clearInterval(this.cascaderTimmer)
//离开该页面需要移除这个监听的事件
window.removeEventListener("scroll", this.cascaderTimmerChange);
Vue.ls.remove("ruleForm1");
Vue.ls.remove("ruleForm2");
},
};
</script>
<style lang="less" scoped>
body {
font-family: Microsoft YaHei ",微软雅黑,宋体";
}
#pcIndex {
height: 100%;
}
</style>
- mIndex.vue
<template>
<div id="mIndex">
<iframe
id="template-iframe"
ref="iframe"
:src="src"
scroll="no"
marginwidth="0px"
frameborder="0"
@load="loaded"
></iframe>
</div>
</template>
<script>
export default {
name: "mIndex",
props: {},
data() {
return {
iframeWin: "",
};
},
watch: {
$route(route) {
// if you go to the redirect page, do not update the breadcrumbs
// console.log(route.path);
},
},
computed: {
src() {
if (process.env.BASE_SYSTEM === "devops_dev") {
return "http://xxx.xxxxxxx.com/";
}
return "https://element.eleme.cn/";
},
},
mounted() {
const that = this;
that.iframeWin = that.$refs.iframe.contentWindow;
},
methods: {
loaded() {
const cookie = document.cookie;
this.iframeWin.postMessage(cookie, this.src);
},
},
};
</script>
<style lang="less" scoped>
#mIndex {
width: 100%;
height: 100%;
box-sizing: border-box;
}
#template-iframe {
width: 100%;
height: 100%;
}
</style>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1e2b8b9523a0e6af5bc4371d582ce5d4.png)