VUE使用中遇到的一些问题（持续更新）

Z时代
2024-01-10
分类：综合

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上。