新手第一次写vue来判断移动端和PC端

时间:2024-03-15 08:52:38

新手第一次写vue来判断移动端和PC端
1.搭建vue脚手架我就不多说了 vue init webpack 文件名。

2.运行npm run dev。

3.在APP文件中。

新手第一次写vue来判断移动端和PC端
我用的是定义一个变量为showPage,通过v-if来进行判断,如果showPage等于1的情况下,那么
则会显示为手机端,如果为showPage==2的情况则为PC端。下面的admin可以忽略点,因为我是
一个vue脚手架同时开发三个项目。

新手第一次写vue来判断移动端和PC端
在created生命周期里面进行判断,navigator.userAgent.match是用来判断浏览器类型的。(remjs(document,global)这块是我自己封装的移动端rem的样式可以忽略掉)。
this.showPage =1 那么显示的则为手机端。
this.showPage =2 那么显示的则为PC端。

接下来:我们在路由文件里面的代码:

新手第一次写vue来判断移动端和PC端
把APP里面写的判断浏览器类型粘贴过来赋值给一个变量。我是赋值给了isPhone。

新手第一次写vue来判断移动端和PC端
接着来判断二级导航为移动端mobile是我自己写的文件夹里面是移动端的页面。新手第一次写vue来判断移动端和PC端

一级导航则为PC端。
新手第一次写vue来判断移动端和PC端
最后就是路由的配置了:

新手第一次写vue来判断移动端和PC端
新手第一次写vue来判断移动端和PC端
新手第一次写vue来判断移动端和PC端
最后export default router即可!。