我要评论
App.vue
<template>
<div class="box">
<router-view v-if="showPage == 1" name="m"></router-view>
<router-view v-else="showPage == 2" name="pc"></router-view>
</div>
</template>
<script>
export default {
methods: {
_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;
},
},
created() {
if (this._isMobile()) {
this.showPage = 1;
} else {
this.showPage = 2;
}
},
};
</script>
<style scoped>
.box {
width: 100%;
height: 100%;
background-color: #070f34;
}
</style> router
import Vue from 'vue'
import VueRouter from 'vue-router'
import index from './pages/index.vue'
import mindex from './pagesApp/mindex.vue'
Vue.use(VueRouter)
/*如果在一个模块化工程中使用它，必须要通过
Vue.use() 明确地安装路由功能：
配置路由的路径 path 配置了关联 并 没有生效*/
export default new VueRouter({
mode: 'history',
routes: [{
path: '/',
components: {
default: index,
pc: index,
m: mindex
}
}]
}) {
path: '/demo',
components: {
default: demo,
pc: pcdemo,
m: demo
},
}
https://router.vuejs.org/zh/guide/essentials/named-views.html
参考链接https://blog.csdn.net/weixin_43946728/article/details/87255087
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论