给Vue添加的第一个页面

1.创建Vue文件
进入项目的components文件夹下,右键创建文件Hello.vue。
在这里插入图片描述
打开Hello.vue,写自己所需要的代码:
在这里插入图片描述
2.修改路由文件
打开route文件夹下index.js文件。导入刚刚写的Vue文件
在这里插入图片描述
在routes数组中添加一个对象:
在这里插入图片描述
此时保存访问一下地址:http://localhost:8080/#/HelloUrl
然后就好啦!如下图
在这里插入图片描述
访问后发现在地址栏中有#号这个让人着实不舒服啊。我们来把他消灭吧!
很简单,只需要在router文件夹下的index.js文件中加入一行代码
在这里插入图片描述
好啦!问题解决了,这样就很舒服了~~
在这里插入图片描述