怎么在vue项目里实现一套代码访问同一个链接，在PC端和移动端显示不同的内容

例如CSDN的pc模式和手机模式页面显示的效果：

img

img


我之前是使用多个router入口的方法实现的，不知道这样有什么不好的地方吗？请大家说说，你们是怎么做的。

使用媒体查询监听当前设备的像素，根据像素来展示不通的样式
https://blog.csdn.net/JJ_Smilewang/article/details/124212772

<style>
    div {
        height: 200px;
        background-color: yellow;    /* 给div设置背景色为黄色 */
    }
    @media screen and (min-width:600px) {
        div {
            background-color: skyblue;    /* 表示屏幕尺寸大于等于600px时，背景色变为天蓝色 */
        }
    }
    @media screen and (min-width:900px) {
        div {
            background-color: pink;  /* 表示屏幕尺寸大于等于900px时，背景色变为粉色 */
        }
    }
    @media screen and (min-width:1200px) {
        div {
            background-color: red;  /* 表示屏幕尺寸大于等于1200px时，背景色变为红色 */
        }
    }
</style>
<body>
    <div></div>
</body>

判断设备是PC端还是移动端

响应式布局

人家这个是响应式布局，了解一下 响应式，响应式维护起来比两套简单的，当然前提是你能把代码写的漂亮
做两套就是 判断 pc 还是 mobile 然后跳转到对应页面，或者是对应链接（两套一般就是两套代码，两个链接）

最优解是写响应式布局,但是响应式布局要考虑各种尺寸下的兼容,
还有一种方法在网页最外层使用两个div,一个div作为pc端的网页盒子,一个作为移动端的盒子,
在网页初始加载的时候可以通过代码判定当前是移动端还是pc端的(这个怎么判断百度一下就有了),然后使用v-if或者v-show控制显示pc端的盒子还是移动端的盒子,这种方式也可以实现同一套代码,同一个链接,pc和移动端内容不同,只是你在写代码时,需要维护pc和移动端两个盒子的内容.