VUE使用中遇到的一些问题(持续更新)

这几天给学生在线做webapp的内容,所以借机把vue也摸索着用起来,中间还是遇到了一些问题,值得记录下来。

1. 静态资源的调用

描述:这个问题来源于轮播图组件实现的过程中,起初将轮播图需要的几张替换图片放在了src下的assets文件夹中,渲染出的DOM中有图片节点div,但是实际上图片一直显示不出来,说明图片资源加载的路径有问题。

解决办法:将图片移动至static文件夹下,同样的,假设要通过axios请求一个本地json文件中的内容,这个json文件也是要放在static文件夹中的。如果要将图片放入assets文件夹中,需要在图片路径'../../static/bg/1.jpg'前加上require('../../static/bg/1.jpg')

原理:这与webpack处理静态资源有关,assets中的文件会经过webpack打包,重新编译(有了新的名称,原路径肯定找不到了)。static下的文件不会被webpack处理,项目在经过build后,会生成dist文件夹,static中的文件只是复制一遍而已。
参考:https://segmentfault.com/q/1010000009842688
在这里插入图片描述

2. 路由跳转到新页面

描述:想从home组件中的某个应用图标点击跳转至新的页面(重新渲染当前页而不是打开新窗口),router-view的位置是一直写在home导航组件下的,而且app根组件中包含轮播图组件,所以永远都无法彻底清空当前页。

解决办法:将轮播图组件加入home组件中,app组件里只留router-view插座做渲染用。路由路径也需要随着更改,/原来映射根组件,现在改为home组件,这样用户直接就进入了导航页,点击用户信息图标后/info就可以直接将app组件内容重新渲染为info组件的内容 ,最后为info组件设置router-link返回home导航页。
其实就是重新设定一个根页面,渲染在原来的根组件app上。

3. 单个vue组件样式的配置

一样可以使用 .class * { box-sizing: border-box; margin:0; padding:0}进行统一设置

猜你喜欢

转载自blog.csdn.net/qq_41366268/article/details/88849294
今日推荐