vue3.0设置路由是修改那个文件

vue3.0设置路由是修改那个文件,第1张

在Vue3.0中设置路由,需要对两个文件进行修改:

1、src/router/index.js:这是Vue3.0中路由的入口文件,在这个文件中可以引入VueRouter并根据需要配置路由规则。具体来说,可以通过`createRouter`函数创建Router实例,并使用`routes`参数来定义路由规则。

2、src/App.vue:这是Vue3.0中的根组件,负责多个页面组件之间的切换。在这个文件中,可以通过``标签来展示当前路由对应的组件内容,并通过``标签来跳转到不同的路由。通过修改这两个文件,就可以实现Vue3.0中的路由设置和跳转。

方法封装在工具类里面,方便在各个页面和项目中使用:

utils.js:

index.html:

网上的方法很难实现当网络状态发生改变后仍然能判断出新的状态,比如在同一页面,从wifi切到4G,或者从4G切到wifi。如果是在微信浏览器里面,微信会缓存userAgent ,导致切换后还是打印上一次的状态,除非退出页面重新进来。

所以得使用官方提供的wx.getNetworkType({})方法,除此之外,别无他法。

因为方法为异步,所以采用了Promise的方式,把网络状态储存在localStorage里面,取的话也是从localStorage里面取。

这个方法可以很准确的判断在微信内、安卓浏览器内的网络状态,会返回wifi、cellular(蜂窝流量)、unknown三种类型,2G/3G/4G/5G都属于cellular。

ios可能因为用户隐私问题,无论是自带浏览器还是UC等,只要不在微信内,都返回unknown。如果有人有办法解决这个问题,就请分享一下吧,三克油~

一、在服务器环境下通过IP访问

首先搭建一个服务器环境或者下载现成的程序集成包(比如phpstudy、jspstudy等)。

确保服务器和手机连接在同一网段。如果是笔记本的话,手机和笔记本直接连接在同一wifi下,如果是台式机,则需要插入无线网卡或者其他的无线措施确保两个在同一网段下。

通过本机IP+端口访问需要测试的项目。

二、liveStyle

liveStyle是个提供“样式实时预览”插件,在编辑器和控制台能够单向/双向实现样式修改的同步,而且对移动页面的远程调试也是非常方便。

在sublimeText通过package安装liveStyle,在chrome安装扩展liveStyle插件。

点击chrome浏览器右上角的liveStyle图标选择同步方式,添加需要修改的css,然后打开编辑器修改对应样式或者在控制台修改样式即可实现双向同步。

移动设备的远程调试 

在liveStyle(http://livestyle.io/)官网下载Emmet LiveStyle APP。安装成功之后打开APP,执行上面的三步,然后完成下图 *** 作后在手机打开生成的网址即可访问本地的项目。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/7854124.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-10
下一篇 2023-04-10

发表评论

登录后才能评论

评论列表(0条)

保存