笔记 || vue3之路由

仿了一个登录注册页面后,就有些许自信了,今天就尝试弄了下路由。

今天是通过vue ui安装的vue3,有一个坑需要记录下:

cmd/vscode运行 vue ui 后会生成一个localhost:[port]链接,浏览器访问这个链接,就可以进行项目的创建了,其他都很常规,唯一一点:等的时间太长,最后卡在创建项目页面半天,内心捉急之下,在cmd里面拼命按空格键,果然都是要催的啊。

虽然是在浏览器中可视化创建项目,但是cmd这边会自动运行相关的命令。

创建好项目后,就开始安装插件(ui界面上依赖是已经安装的插件),把tab切换到插件,找到vue-router,点击安装(时间也非常久)

根目录会自动生成一个router/index.js(命令安装的不会自动生成,需要手动创建)

router/index.js里面可以配置一些路由,比如我今天参照一个小说网站手机端,我新增了轮播、列表、九宫格这几个子组件,路由配置如下:

路由配置

然后,我需要在/src/views这个文件夹下创建对应的子组件:

自建子组件目录

在main.js中引入路由:

路由配置

在App.vue中使用路由:

App.vue路由

运行程序,最后效果:

运行界面

今天有个头疼的事情:vue3+mui制作的轮播图,无论如何也动不起来,只显示第二张图片,希望明天能找到解决办法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容