blocks|key|2688004|text|我有一个想法，使用一个混入来检测浏览器是在移动设备上打开还是在桌面上打开(以此答案中的js代码为例)。然后使用v-if，例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2688005|<production-list+v-if="!isMobile()"></production-list>
<production-list-mobile+v-else></production-list-mobile>|code-block|syntax|javascript|2688006|这里有一个关于https://jsfiddle.net/Ldku0xec/+1的例子：https://vuejs.org/v2/guide/mixins.html+2：Detecting+a+mobile+browser|offset|length|2688007|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/Ldku0xec/|1|https://vuejs.org/v2/guide/mixins.html|2|https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser^0|0|0|7|U|0|17|12|1|2C|Q|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]|$I|12|J|13|1|14]|$I|15|J|16|1|17]]|A|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]|U|$5|N|O|P|A|$Q|V]]]]

<p>I have an idea, use a [mixin][1] which detects if the browser is opened on mobile or desktop (example for js code in this [answer][2] ).. then use v-if, for example</p>
<pre><code>&lt;production-list v-if=&quot;!isMobile()&quot;&gt;&lt;/production-list&gt;
&lt;production-list-mobile v-else&gt;&lt;/production-list-mobile&gt;
</code></pre>
<p>so here is an example on <a href="https://jsfiddle.net/Ldku0xec/" rel="noreferrer">https://jsfiddle.net/Ldku0xec/</a>
[1]: <a href="https://vuejs.org/v2/guide/mixins.html" rel="noreferrer">https://vuejs.org/v2/guide/mixins.html</a>
[2]: <a href="https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser">Detecting a mobile browser</a></p>


blocks|key|2477874|text|我有一个针对Vue.js的简单解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2477875|<div+v-if="!isMobile()">
++<desktop>
++</desktop>
</div>
<div+v-else>
++<mobile>
++</mobile>
</div>|code-block|syntax|javascript|2477876|和方法：|2477877|methods:+{
+isMobile()+{
+++if(/Android%7CwebOS%7CiPhone%7CiPad%7CiPod%7CBlackBerry%7CIEMobile%7COpera+Mini/i.test(navigator.userAgent))+{
+++++return+true
+++}+else+{
+++++return+false
+++}
+}
}|2477878|entityMap^0|6|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>I have simple solution for <strong>Vue.js</strong>: </p>

<pre><code>&lt;div v-if="!isMobile()"&gt;
  &lt;desktop&gt;
  &lt;/desktop&gt;
&lt;/div&gt;
&lt;div v-else&gt;
  &lt;mobile&gt;
  &lt;/mobile&gt;
&lt;/div&gt;
</code></pre>

<p>And methods:</p>

<pre><code>methods: {
 isMobile() {
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
     return true
   } else {
     return false
   }
 }
}
</code></pre>


blocks|key|23009|text|我也遇到了同样的问题，我用一个中立的、没有布局的vue文件(Init.vue)解决了这个问题，这个文件可以被移动设备和桌面访问，并且这个文件会重定向到正确的文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|23010|假设我有Main.vue和MainMobile.vue。我将添加一个将重定向的Init.vue。所以我的路由器/index.js是：|23011|import+Router+from+'vue-router'
import+Vue+from+'vue'
import+Main+from+'@/components/Main'
import+MainMobile+from+'@/components/MainMobile'
import+Init+from+'@/components/Init'

Vue.use(Router)

export+default+new+Router({
++routes:+[
+++++{
++++++++path:+'/',
++++++++name:+'Root',
++++++++component:+Init
+++++},
++++{
++++++path:+'/Main',
++++++name:+'Main',
++++++component:+Main
++++},
++++{
++++++path:+'/MainMobile',
++++++name:+'MainMobile',
++++++component:+MainMobile
++++},
++]
})|code-block|syntax|javascript|23012|在Init.vue文件中，将进行移动/桌面检测：|23013|<template>
</template>
<script>
++++export+default+{
++++++++name:+'Init',
++++++++methods:+{
++++++++++++isMobile()+{
++++++++++++++++if(+screen.width+<=+760+)+{
++++++++++++++++++++return+true;
++++++++++++++++}
++++++++++++++++else+{
++++++++++++++++++++return+false;
++++++++++++++++}
++++++++++++}
++++++++},
++++++++created()+{
++++++++++++if+(this.isMobile())+{
++++++++++++++++this.$router.push('/MainMobile');
++++++++++++}
++++++++++++else+{
++++++++++++++++this.$router.push('/Main');
++++++++++++}
++++++++}
++++}
</script>
<style+scoped>
</style>|23014|使用的isMobile()函数非常简单，您可以更改为任何其他函数。|23015|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I had this same problem, I solved it using a neutral and no layout vue file (Init.vue) that will be accessed by mobile and desktop, and this file redirects to the correct file.</p>

<p>Let's suppose that I have the Main.vue and the MainMobile.vue. I will add an Init.vue that will redirect. So my router/index.js is that:</p>

<pre><code>import Router from 'vue-router'
import Vue from 'vue'
import Main from '@/components/Main'
import MainMobile from '@/components/MainMobile'
import Init from '@/components/Init'

Vue.use(Router)

export default new Router({
  routes: [
     {
        path: '/',
        name: 'Root',
        component: Init
     },
    {
      path: '/Main',
      name: 'Main',
      component: Main
    },
    {
      path: '/MainMobile',
      name: 'MainMobile',
      component: MainMobile
    },
  ]
})
</code></pre>

<p>At the Init.vue file, the mobile/desktop detection will happen:</p>

<pre><code>&lt;template&gt;
&lt;/template&gt;
&lt;script&gt;
    export default {
        name: 'Init',
        methods: {
            isMobile() {
                if( screen.width &lt;= 760 ) {
                    return true;
                }
                else {
                    return false;
                }
            }
        },
        created() {
            if (this.isMobile()) {
                this.$router.push('/MainMobile');
            }
            else {
                this.$router.push('/Main');
            }
        }
    }
&lt;/script&gt;
&lt;style scoped&gt;
&lt;/style&gt;
</code></pre>

<p>The isMobile() function used is very simple, you can change to any other.</p>


blocks|key|23017|text|这有点晚了，但是，如果你们中的任何人正在寻找，我像这样处理了这种情况:我在我的路由器中添加了meta：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|23018|​|23019|const+router+=+new+Router({
+++++routes:+[{
++++++path:+'/main-view
++++++name:+'mainView',
++++++component:+MainView,
++++++meta:+{
++++++++'hasMobileView':+true
++++++}
+++++},
++++{
+++++path:+'/mobile-view',
++++++name:+'mobileView',
++++++component:+mobileView,
++++++meta:+{
++++++++'hasDesktopView':+true
++++++}
+++++},
++++}]
})

then+on+beforeeach+function+

router.beforeEach((to,+from,+next)+=>+{
++const+hasMobileView+=+to.matched.some((route)+=>+route.meta.hasMobileView)
++if+(hasMobileView)+{
++++if+(navigator.userAgent.match(/Android/i)+%7C%7C
++++++navigator.userAgent.match(/webOS/i)+%7C%7C
++++++navigator.userAgent.match(/iPhone/i)+%7C%7C
++++++navigator.userAgent.match(/iPad/i)+%7C%7C
++++++navigator.userAgent.match(/iPod/i)+%7C%7C
++++++navigator.userAgent.match(/BlackBerry/i)+%7C%7C
++++++navigator.userAgent.match(/Windows+Phone/i))+{
++++++next('/mobile-view')
++++}+else+{
++++++next()
++++}
++}
})`|code-block|syntax|javascript|23020|23021|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>A bit late for this but, in case if any of you are looking for I handled the situation like this:
I added meta to my router:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const router = new Router({
     routes: [{
      path: '/main-view
      name: 'mainView',
      component: MainView,
      meta: {
        'hasMobileView': true
      }
     },
    {
     path: '/mobile-view',
      name: 'mobileView',
      component: mobileView,
      meta: {
        'hasDesktopView': true
      }
     },
    }]
})

then on beforeeach function 

router.beforeEach((to, from, next) =&gt; {
  const hasMobileView = to.matched.some((route) =&gt; route.meta.hasMobileView)
  if (hasMobileView) {
    if (navigator.userAgent.match(/Android/i) ||
      navigator.userAgent.match(/webOS/i) ||
      navigator.userAgent.match(/iPhone/i) ||
      navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/iPod/i) ||
      navigator.userAgent.match(/BlackBerry/i) ||
      navigator.userAgent.match(/Windows Phone/i)) {
      next('/mobile-view')
    } else {
      next()
    }
  }
})`</code></pre>
</div>
</div>
</p>


blocks|key|24452|text|我正在寻找解决方案，来到这里，但我找不到我需要的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|24453|24454|异步导入，以便仅在调整布局大小时根据viewport.|ordered-list-item|24455|Capability将所需内容加载到捆绑包中，以服务于不同的布局|24456|24457|我混合和匹配了一些我在网上读到的东西，包括这里的答案，所以我想我应该回来把我学到的所有东西放在一个函数中，供其他任何人使用：|24458|/**
+*+Breakpoint+configuration+to+be+in+line+with+element-ui's+standards
+*+@type+{{LABELS:+string[],+VALUES:+number[]}}
+*/
const+BREAKPOINTS+=+{
++++LABELS:+['xs',+'sm',+'md',+'lg',+'xl'],
++++VALUES:+[0,+768,+992,+1200,+1920,+Infinity]
};


/**
+*+@typedef+ViewFactory
+*+@type+function
+*+A+function+which+returns+a+promise+which+resolves+to+a+view.+Used+to+dynamically+fetch+a+view+file+on+the+fly+during
+*+run+time+on+a+need+basis
+*/


/**
+*+A+helper+to+get+a+responsive+route+factory+which+renders+different+views+based+on+the+current+view+point
+*+@param+{{xs:[ViewFactory],sm:[ViewFactory],md:[ViewFactory],lg:[ViewFactory]}}+map+-+A+map+of+breakpoint+key+to+a+ViewFactory
+*+@returns+{ViewFactory}+-+A+view+factory+which+invokes+and+returns+an+item+supplied+in+the+map+based+on+the+current+viewport+size
+*/
export+default+function+responsiveRoute(map)+{
++++return+function+getResponsiveView()+{
++++++++const+screenWidth+=+document.documentElement.clientWidth;

++++++++//+Find+the+matching+index+for+the+current+screen+width
++++++++const+matchIndex+=+BREAKPOINTS.VALUES.findIndex((item,+idx)+=>+{
++++++++++++if+(idx+===+0)+{
++++++++++++++++return+false;
++++++++++++}
++++++++++++return+screenWidth+>=+BREAKPOINTS.VALUES[idx+-+1]+&&+screenWidth+<+BREAKPOINTS.VALUES[idx];
++++++++})+-+1;


++++++++if+(map[BREAKPOINTS.LABELS[matchIndex]])+{
++++++++++++//+Perfect+match,+use+it
++++++++++++return+map[BREAKPOINTS.LABELS[matchIndex]]();
++++++++}+else+{
++++++++++++//+Go+down+the+responsive+break+points+list+until+a+match+is+found
++++++++++++let+counter+=+matchIndex;
++++++++++++while+(counter--+>+0)+{
++++++++++++++++if+(map[BREAKPOINTS.LABELS[counter]])+{
++++++++++++++++++++return+map[BREAKPOINTS.LABELS[counter]]();
++++++++++++++++}
++++++++++++}
++++++++++++return+Promise.reject({
++++++++++++++++code:+500,
++++++++++++++++info:+'No+component+matched+the+breakpoint+-+probably+a+configuration+error'
++++++++++++});
++++++++}
++++};
}+|code-block|syntax|javascript|24459|用法：|24460|const+router+=+new+Router({
++++mode:+'history',
++++base:+process.env.BASE_URL,
++++routes:[{
++++++path:+'/login',
++++++name:+'login',
++++++component:+responsiveRoute({
++++++++++//+route+level+code-splitting
++++++++++//+this+generates+a+separate+chunk+(login-xs.[hash].js)+for+this+route
++++++++++//+which+is+lazy-loaded+when+the+route+is+visited.
++++++++++xs:+()+=>+import(/*+webpackChunkName:+"login-xs"+*/+'./views/Login/Login-xs.vue'),
++++++++++//+sm+key+is+missing,+it+falls+back+to+xs
++++++++++md:+()+=>+import(/*+webpackChunkName:+"login-md"+*/+'./views/Login/Login-md.vue')
++++++++++//+lg,+xl+keys+are+missing+falls+back+to+md
++++++})+
++}]
});+|24461|它的工作原理：|24462|Vue路由器支持将component密钥定义为函数，该函数返回支持异步路由的承诺。最常见的方法是使用返回promise的webpack+import()函数。返回promise的函数仅在即将呈现路由时调用，以确保我们可以延迟加载组件|offset|length|style|CODE|24463|responsiveRoute函数接受这些函数的映射，并为不同的断点设置键，并返回一个函数，该函数在调用时检查可用视区大小并返回，调用正确的promise工厂并返回它返回的promise。|24464|备注：|24465|我喜欢这种方法，因为它不要求应用程序架构或路由配置以某种方式进行。使用Vue+Router提供的开箱即用功能，它非常即插即用。它也不会强制您为每个断点-路由组合定义一个视图。你可以像往常一样定义一个没有这个的路由(不管是不是惰性加载的)，以及其他使用它的路由，没有任何问题。|24466|此方法不使用用户代理嗅探，而是使用document.documentElement的可用宽度。我看到的其他方法是推荐的，比如window.screen.width，它给出了准确的设备屏幕大小，而不考虑窗口大小，或者是一个更强大的window.innerWidth+%7C%7C+document.documentElement.clientWidth+%7C%7C+document.body.clientWidth。根据需要进行混合和匹配。|24467|我的断点是(数字和它们的值)基于元素-ui断点，就像我在正常的响应式设计中使用的那样。通过更改顶部的常量，可以根据需要再次进行配置|24468|entityMap^0|0|0|0|0|0|0|0|0|0|0|9|9|1W|8|0|0|F|0|0|0|H|O|1Q|J|36|2E|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1F|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1G|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1I|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1J|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1K|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|1L|8|@]|9|@]|A|$N|O]]|$1|T|3|U|5|6|7|1M|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1N|8|@$X|1O|Y|1P|Z|10]|$X|1Q|Y|1R|Z|10]]|9|@]|A|$]]|$1|11|3|12|5|6|7|1S|8|@$X|1T|Y|1U|Z|10]]|9|@]|A|$]]|$1|13|3|14|5|6|7|1V|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|1W|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|1X|8|@$X|1Y|Y|1Z|Z|10]|$X|20|Y|21|Z|10]|$X|22|Y|23|Z|10]]|9|@]|A|$]]|$1|19|3|1A|5|6|7|24|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|25|8|@]|9|@]|A|$]]]|1C|$]]

<p>I was looking for a solution for this and came here but I couldn't find what I needed:</p>

<ol>
<li>Asynchronous imports to only load into the bundle what was needed based on the viewport.</li>
<li>Capability to serve a different layout if the layout was resized</li>
</ol>

<p>I mixed and matched a few things I read online including answers here so I thought I'd just come back and put all my learnings into one function for anyone else looking:</p>

<pre><code>/**
 * Breakpoint configuration to be in line with element-ui's standards
 * @type {{LABELS: string[], VALUES: number[]}}
 */
const BREAKPOINTS = {
    LABELS: ['xs', 'sm', 'md', 'lg', 'xl'],
    VALUES: [0, 768, 992, 1200, 1920, Infinity]
};


/**
 * @typedef ViewFactory
 * @type function
 * A function which returns a promise which resolves to a view. Used to dynamically fetch a view file on the fly during
 * run time on a need basis
 */


/**
 * A helper to get a responsive route factory which renders different views based on the current view point
 * @param {{xs:[ViewFactory],sm:[ViewFactory],md:[ViewFactory],lg:[ViewFactory]}} map - A map of breakpoint key to a ViewFactory
 * @returns {ViewFactory} - A view factory which invokes and returns an item supplied in the map based on the current viewport size
 */
export default function responsiveRoute(map) {
    return function getResponsiveView() {
        const screenWidth = document.documentElement.clientWidth;

        // Find the matching index for the current screen width
        const matchIndex = BREAKPOINTS.VALUES.findIndex((item, idx) =&gt; {
            if (idx === 0) {
                return false;
            }
            return screenWidth &gt;= BREAKPOINTS.VALUES[idx - 1] &amp;&amp; screenWidth &lt; BREAKPOINTS.VALUES[idx];
        }) - 1;


        if (map[BREAKPOINTS.LABELS[matchIndex]]) {
            // Perfect match, use it
            return map[BREAKPOINTS.LABELS[matchIndex]]();
        } else {
            // Go down the responsive break points list until a match is found
            let counter = matchIndex;
            while (counter-- &gt; 0) {
                if (map[BREAKPOINTS.LABELS[counter]]) {
                    return map[BREAKPOINTS.LABELS[counter]]();
                }
            }
            return Promise.reject({
                code: 500,
                info: 'No component matched the breakpoint - probably a configuration error'
            });
        }
    };
} 
</code></pre>

<p>Usage:</p>

<pre><code>const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes:[{
      path: '/login',
      name: 'login',
      component: responsiveRoute({
          // route level code-splitting
          // this generates a separate chunk (login-xs.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          xs: () =&gt; import(/* webpackChunkName: "login-xs" */ './views/Login/Login-xs.vue'),
          // sm key is missing, it falls back to xs
          md: () =&gt; import(/* webpackChunkName: "login-md" */ './views/Login/Login-md.vue')
          // lg, xl keys are missing falls back to md
      }) 
  }]
}); 
</code></pre>

<p>How it works:</p>

<p>Vue Router supports defining the <code>component</code> key as a function which returns a promise to support async routes. The most common way being to use the webpack <code>import()</code> function which returns a promise. The function which returns the promise is only invoked when the route is about to be rendered ensuring we can lazy load our components</p>

<p>The <code>responsiveRoute</code> function accepts a map of these functions with keys set for different breakpoints and returns a function which, when invoked, checks the available viewport size and returns invokes the correct promise factory and return's the promise returned by it.</p>

<p>Notes:</p>

<p>I like this method because it does not require the application architecture or route configurations to be in a certain way. It's pretty plug and play using Vue Router capabilities provided out of the box. It also does not force you to define a view for every breakpoint-route combination. You can define a route as usual without this(lazy loaded or not) along side other routes that use this without any problems.</p>

<p>This method does not use user agent sniffing but uses the available width of the <code>document.documentElement</code> instead. Other methods I saw recommended things like <code>window.screen.width</code> which gives the exact device screen size regardless of the window size or a more robust <code>window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth</code>. Mix and match as needed.</p>

<p>My break points are (number and their values) are based on element-ui breakpoints as I used that for normal responsive design. This can again be configured as needed by changing the constants at the top</p>


blocks|key|22967|text|我有一个更好的main.js+src/+solution.In：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|22968|+if+(condition)+{
++++require('./pc/main)
+}else+{
++++require('./mobile/main')
}|code-block|syntax|javascript|22969|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have a better solution.In src/main.js:</p>

<pre><code> if (condition) {
    require('./pc/main)
 }else {
    require('./mobile/main')
}
</code></pre>


blocks|key|2688174|text|这有点晚了，但是，如果你们中的任何人想要绑定viewport大小的观察器，和/或在页面加载时进行检查。它需要编写大量的样板文件，但对于小型应用程序很有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2688175|export+default+{
++data:+()+=>+({
++++isMobile:+false
++}),

++beforeDestroy+()+{
++++if+(typeof+window+!==+'undefined')+{
++++++window.removeEventListener('resize',+this.onResize,+{+passive:+true+})
++++}
++},

++mounted+()+{
++++this.onResize()
++++window.addEventListener('resize',+this.onResize,+{+passive:+true+})
++},

++methods:+{
++++onResize+()+{
++++++this.isMobile+=+window.innerWidth+<+600
++++}
++}
}|code-block|syntax|javascript|2688176|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A bit late for this but, in case if any of you are looking to bind watchers for the viewport size, 
and/or check whenever the page loads. 
Its a lot of boilerplate to write but can be useful for small applications. </p>

<pre><code>export default {
  data: () =&gt; ({
    isMobile: false
  }),

  beforeDestroy () {
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', this.onResize, { passive: true })
    }
  },

  mounted () {
    this.onResize()
    window.addEventListener('resize', this.onResize, { passive: true })
  },

  methods: {
    onResize () {
      this.isMobile = window.innerWidth &lt; 600
    }
  }
}
</code></pre>


blocks|key|2478037|text|Beaudinn+Greves的扩展版本回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2478038|2478039|使用命名路由器视图|unordered-list-item|2478040|监听窗口调整大小并设置为true+if+width+smaller+then+xy|2478041|in+router.js使用"components“而不是"component”并导入(您可以使用require)桌面和移动组件|2478042|2478043|App.vue：|2478044|<template>
++<div+id="app"+class="container+grid-lg">
++++<router-view+v-if="!store.app.isMobile"/>
++++<router-view+v-else+name="mobile"/>
++</div>
</template>
...
name:+"app",
++data:+function()+{
++return+{
++++store:+this.$store.state
++};
},
mounted+()+{
++this.onResize()
++window.addEventListener('resize',+this.onResize,+{+passive:+true+})
},
methods:+{
++onResize+()+{
++++this.store.app.isMobile+=+window.innerWidth+<+600
++}
},
beforeDestroy+()+{
++if+(typeof+window+!==+'undefined')+{
++++window.removeEventListener('resize',+this.onResize,+{+passive:+true+})
++}
}|code-block|syntax|javascript|2478045|router.js：|2478046|routes:+[
++{
++++path:+'/',
++++name:+'home',
++++components:+{
++++++default:+Home,
++++++mobile:+HomeMobile
++++}
++}
]|2478047|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|11|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|14|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|15|8|@]|9|@]|A|$]]|$1|T|3|U|5|O|7|16|8|@]|9|@]|A|$P|Q]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>An extended version of Beaudinn Greves answer:</p>

<ul>
<li>Use named router views</li>
<li>listen on window resize and set isMobile true if width smaller then xy</li>
<li>in router.js use "components" instead of "component" and import (you may use require) the desktop and mobile components</li>
</ul>

<p>App.vue:</p>

<pre><code>&lt;template&gt;
  &lt;div id="app" class="container grid-lg"&gt;
    &lt;router-view v-if="!store.app.isMobile"/&gt;
    &lt;router-view v-else name="mobile"/&gt;
  &lt;/div&gt;
&lt;/template&gt;
...
name: "app",
  data: function() {
  return {
    store: this.$store.state
  };
},
mounted () {
  this.onResize()
  window.addEventListener('resize', this.onResize, { passive: true })
},
methods: {
  onResize () {
    this.store.app.isMobile = window.innerWidth &lt; 600
  }
},
beforeDestroy () {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', this.onResize, { passive: true })
  }
}
</code></pre>

<p>router.js:</p>

<pre><code>routes: [
  {
    path: '/',
    name: 'home',
    components: {
      default: Home,
      mobile: HomeMobile
    }
  }
]
</code></pre>


blocks|key|2688263|text|对于vuetify用户，您可以使用带有dynamic+component加载的breakpoints。假设您有两个组件:+DesktopLayout.vue和MobileLayout.vue。在你想要加载不同布局的页面中，像这样定义一个动态组件；|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2688264|<component+:is="currentComponent"></component>|code-block|syntax|javascript|2688265|添加一个名为"currentComponent“的计算属性。|2688266|computed:+{
++++currentComponent()+{
++++++++return+this.$vuetify.breakpoint.xsOnly
++++++++++++?+"MobileLayout"
++++++++++++:+"DesktopLayout";
++++}
}|2688267|this.$vuetify.breakpoint.xsOnly将只在超小屏幕上使用"MobileLayout“。在vuetify中定义了许多断点。例如，您可以使用"mdAndDown“为中等大小和向下的屏幕选择一个范围。|style|CODE|2688268|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/v2/guide/components-dynamic-async.html|1|https://vuetifyjs.com/en/customization/breakpoints/^0|J|H|0|13|B|1|0|0|0|0|0|V|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|1A|8|@$A|1B|B|1C|O|P]]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

<p>For vuetify users, you can use <a href="https://vuetifyjs.com/en/customization/breakpoints/" rel="noreferrer">breakpoints</a> with <a href="https://vuejs.org/v2/guide/components-dynamic-async.html" rel="noreferrer">dynamic component</a> loading. Suppose you have two components; DesktopLayout.vue and MobileLayout.vue. In the page where you want to load different layouts, define a dynamic component like this; </p>

<pre><code>&lt;component :is="currentComponent"&gt;&lt;/component&gt;
</code></pre>

<p>Add a computed property named "currentComponent".</p>

<pre><code>computed: {
    currentComponent() {
        return this.$vuetify.breakpoint.xsOnly
            ? "MobileLayout"
            : "DesktopLayout";
    }
}
</code></pre>

<p><code>this.$vuetify.breakpoint.xsOnly</code> will make use "MobileLayout" only on extra small screens. There are many breakpoints defined in vuetify. For example you can select a range by using "mdAndDown" for medium size and down screens.</p>


blocks|key|23083|text|你可以简单地获取用户代理并解析它，然后你有一个变量isMobile，我假设你在这个答案中有它，当你导入两个组件(桌面和移动)时，我想提到一个重要的事情，当用户访问你的页面时，他们都会下载哦，我的天！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|23084|解决方案是：|23085|<template>
+<component+:is="headerInstance"+/>
</template>

<script>
export+default+{
computed:+{
++++headerInstance()+{
++++++const+component+=+this.isMobile
++++++++?+'/HeaderMobile'
++++++++:+'/HeaderDesktop'
++++++return+()+=>+import(`@/components/Layouts/Header${component}`)
++++}
}
}
</script>|code-block|syntax|javascript|23086|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>you can simply get user agent and parse it and then you have a variable isMobile
i assume you have it in this answer and i want to mention an important thing when you import both components (desktop and mobile) when user visit your page they both will download oh my God!!!</p>
<p>the solution is :</p>
<pre><code>&lt;template&gt;
 &lt;component :is=&quot;headerInstance&quot; /&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
computed: {
    headerInstance() {
      const component = this.isMobile
        ? '/HeaderMobile'
        : '/HeaderDesktop'
      return () =&gt; import(`@/components/Layouts/Header${component}`)
    }
}
}
&lt;/script&gt;
</code></pre>


blocks|key|2478214|text|resources/js/components/Options.vue|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2478215|<template>
++++<div+class="text-right+mt-6+ml-16+fixed">
++++++++<div+v-if="isMobile()"+class="px-0.5+py-0.5+hidden+portrait:block">
++++++++++++{/*+...+*/}
++++++++</div>
++++++++<div+v-else+class="px-0.5+py-0.5">
++++++++++++{/*+...+*/}
++++++++</div>
++++</div>
</template>

<script>
++++export+default+{
++++++++methods:+{
++++++++++++isMobile()+{
++++++++++++++++if+('maxTouchPoints'+in+navigator)+return+navigator.maxTouchPoints+>+0+?+true+:+false
++++++++++++++++else+return+/Android%7CwebOS%7CiPhone%7CiPad%7CiPod%7CBlackBerry%7CIEMobile%7COpera+Mini/i.test(navigator.userAgent)
++++++++++++}
++++++++}
++++}
</script>|code-block|syntax|javascript|2478216|tailwind.config.js|2478217|module.exports+=+{
++++purge:+[],
++++theme:+{
++++++++extend:+{
++++++++++++screens:+{
++++++++++++++++'portrait':+{'raw':+'(orientation:+portrait)'},
++++++++++++}
++++++++}
++++},
++++variants:+{
++++++++extend:+{}
++++},
++++plugins:+[]
}|2478218|桌面范围|2478219|​|2478220|📷|atomic|offset|length|2478221|2478222|桌面小|2478223|2478224|2478225|2478226|手机画像|2478227|2478228|2478229|2478230|移动环境|2478231|2478232|2478233|2478234|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/eab855ec6f4645f4d48f24626eaec379.jpeg|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/abd4829b45aa5c8c21d307df8d734179.png|2|https://ask.qcloudimg.com/http-save/yehe-900000/aeb4470bf1ac973d50d22cf54bc70907.png|3|https://ask.qcloudimg.com/http-save/yehe-900000/7af61539e0447bdc1756470155f3ca9a.jpeg^0|0|0|0|0|0|0|0|1|0|0|0|0|0|0|1|1|0|0|0|0|0|1|2|0|0|0|0|0|1|3|0|0^^$0|@$1|2|3|4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1S|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1T|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1U|8|@]|9|@$R|1V|S|1W|1|1X]]|A|$]]|$1|T|3|N|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|W|3|N|5|6|7|20|8|@]|9|@]|A|$]]|$1|X|3|P|5|Q|7|21|8|@]|9|@$R|22|S|23|1|24]]|A|$]]|$1|Y|3|N|5|6|7|25|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|26|8|@]|9|@]|A|$]]|$1|11|3|N|5|6|7|27|8|@]|9|@]|A|$]]|$1|12|3|P|5|Q|7|28|8|@]|9|@$R|29|S|2A|1|2B]]|A|$]]|$1|13|3|N|5|6|7|2C|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|2D|8|@]|9|@]|A|$]]|$1|16|3|N|5|6|7|2E|8|@]|9|@]|A|$]]|$1|17|3|P|5|Q|7|2F|8|@]|9|@$R|2G|S|2H|1|2I]]|A|$]]|$1|18|3|N|5|6|7|2J|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G|1H|-4]]|1I|$5|1C|1D|1E|A|$1F|1J|1H|-4]]|1K|$5|1C|1D|1E|A|$1F|1L|1H|-4]]|1M|$5|1C|1D|1E|A|$1F|1N|1H|-4]]]]

<h3>resources/js/components/Options.vue</h3>
<pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;text-right mt-6 ml-16 fixed&quot;&gt;
        &lt;div v-if=&quot;isMobile()&quot; class=&quot;px-0.5 py-0.5 hidden portrait:block&quot;&gt;
            {/* ... */}
        &lt;/div&gt;
        &lt;div v-else class=&quot;px-0.5 py-0.5&quot;&gt;
            {/* ... */}
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
    export default {
        methods: {
            isMobile() {
                if ('maxTouchPoints' in navigator) return navigator.maxTouchPoints &gt; 0 ? true : false
                else return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
            }
        }
    }
&lt;/script&gt;
</code></pre>
<h3>tailwind.config.js</h3>
<pre class="lang-js prettyprint-override"><code>module.exports = {
    purge: [],
    theme: {
        extend: {
            screens: {
                'portrait': {'raw': '(orientation: portrait)'},
            }
        }
    },
    variants: {
        extend: {}
    },
    plugins: []
}
</code></pre>
<h3>Desktop wide</h3>
<p><a href="https://i.stack.imgur.com/54e89.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/54e89.jpg" alt="Desktop wide" /></a></p>
<h3>Desktop small</h3>
<p><a href="https://i.stack.imgur.com/tOhJB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tOhJB.png" alt="Desktop small" /></a></p>
<h3>Mobile portrait</h3>
<p><a href="https://i.stack.imgur.com/sGXXv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sGXXv.png" alt="Mobile portrait" /></a></p>
<h2>Mobile landscape</h2>
<p><a href="https://i.stack.imgur.com/hOCxd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hOCxd.jpg" alt="Mobile landscape" /></a></p>


blocks|key|2478308|text|您需要检查是否为移动设备|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2478309|const+isMobile=()+=>(+window.innerWidth+<=+760+)|code-block|syntax|javascript|2478310|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you need to check if is mobile</p>
<pre><code>const isMobile=() =&gt;( window.innerWidth &lt;= 760 )
</code></pre>


<p>I am developing an SPA using Vue 2.0. The components developed so far are for the "desktop" browsers, for example, I have</p>

<p>Main.vue,
ProductList.vue,
ProductDetail.vue,</p>

<p>I want another set of components for the mobile browsers, such as
MainMobile.vue,
ProductListMobile.vue,
ProductDetailMobile.vue,</p>

<p>My question is, where and how do I make my SPA render the mobile version of components when viewing in a mobile browser?</p>

<p>Please note that I explicitly want to <strong>avoid</strong> making my components responsive. I want to keep two separate versions of them.</p>

<p>Thanks,  </p>


Display different Vuejs components for mobile browsers

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用Vue 2.0开发一个SPA。到目前为止，开发的组件都是针对“桌面”浏览器的，例如，我有Main.vue，ProductList.vue，ProductDetail.vue，我想要另一套用于移动浏览器的组件，如MainMobile.vue，ProductListMobile.vue，ProductDetail...

问为移动浏览器显示不同的Vuejs组件
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为移动浏览器显示不同的Vuejs组件EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为移动浏览器显示不同的Vuejs组件
EN