vue学习--动态组件

最新推荐文章于 2023-01-30 15:05:55 发布

节流子

最新推荐文章于 2023-01-30 15:05:55 发布

阅读量1.1k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44168784/article/details/124347888

版权

本文详细介绍了如何从头创建一个Vue项目，包括清理初始项目、创建组件、注册路由以及实现基本页面布局。通过创建Home和Login组件，并将它们与路由结合，展示了如何使页面显示具体内容。同时，提到了meta信息在路由中的应用，以及简单页面布局的实现。

摘要由CSDN通过智能技术生成

1.第一件事，创建一个空项目
2.该删除删除，然后就只剩下这样的空目录
在这里插入图片描述

3.这时候路由注册表都被我清空，唯一的组件就是app.vue,就剩下一个占位符router-view，所以页面一p片空白，要想页面有东西，就必须让一个有内容的组件替换这个占位符，例如在view文件夹下创建一个home文件夹，下面创建home.vue文件，并且注册到路由中，那么占位符就会被home.vue替换掉，页面内容就是home.vue内容。或者login文件夹，下面创建login.vue文件。可以在文件夹下面再创建component文件夹，一些子路由可以放里面。这里，文件名可以换成index.vue，引入的时候会自动匹配。
4.home.vue直接改名index.vue，主要取名字麻烦，这样省事，里面随便写点东西
然后注册到路由，页面就会有东西了
![在这里插入图片描述](https://img-blog.csdnimg.cn/b6d2ae48544a4d3e99bc6deec9a7e1b4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSn5a

Sn5biF5q-U,size_20,color_FFFFFF,t_70,g_se,x_16)
这里meta里面可以放一些路由信息，页面中可能会用的，例如路由守卫就可以根据 to.meta.requireAuth这个值是否为真作为拦截条件，具体可以参考meta用法。这时页面就有了简单的内容。
4.接下来就是调整下页面布局，引入组件，这里简单的左右布局就好
页面简单效果如下，这个时候还没动态引入组件，两个组件都显示在页面上
![在这里插入图片描述](https://img-blog.csdnimg.cn/9b8cee7d1aef4bb099ba3f9f7d2ff39e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSn5aSn5biF5q-U,size_20,color_FFFFFF,t_70,g_se,x_16