VUE项目学习（四）：编写个人页面和配置路由

柔情只为你懂 2023-01-01 03:49 139阅读 0赞

## VUE项目学习（四）：编写个人页面和配置路由 ##

### 1、准备工作，下载vue项目 ###

先配置好node.js开发环境，并使用VUE-Cli下载好VUE项目，具体流程可以参考博客[https://blog.csdn.net/qq\_26666947/article/details/111929871][https_blog.csdn.net_qq_26666947_article_details_111929871]  
本文使用HBuilderX作为VUE项目开发工具，也可以使用VSCode工具。

### 2、删除初始VUE项目的显示Logo ###

在App.vue中，存在一个默认logo图片显示引用，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]  
删除代码之后，logo就是消失，显示效果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]

### 3、定义个人页面和路由 ###

（1）编写个人页面，在components文件夹中新建vue文件，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 2]  
（2）写入测试内容

<template>
      <div>
        <h2>个人编辑的第一个页面</h2>
      </div>
    </template>
    
    <script> export default { name: 'demo' } </script>
    
    <style> </style>

（3）配置页面路由  
在router文件夹：index.js中增加路由，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 3]  
增加的路由代码：

{ 
          path: '/demo',
          name: 'demo',
          component: () => import("@/components/demo")
        }

增加位置为：（注意英文逗号一定不能少）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 4]

### 4、运行vue项目 ###

启动项目，在编译工具的终端输入命令：

npm run dev

在浏览器中输入地址：http://localhost:8080/\#/demo，即可显示个人页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 5]

[https_blog.csdn.net_qq_26666947_article_details_111929871]: https://blog.csdn.net/qq_26666947/article/details/111929871
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221120/69023eabb3494f3c89089c906c64758c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]: /images/20221120/0543e922dde0419a876c7df411293112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210111103049683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210111103650339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210111104115115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210111104406691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70