近期用Vue.js搭了一个仿cnode的社区，中间遇到一些坑，故把一些注意事项记录下来。
预览链接：https://yukiweng.github.io/cnode/dist/index.html
将整个项目结构拆分为以下组件：
- header 头部
- PosList 文章列表
- Article 文章详情页
- SlideBar 侧边栏
- UserInfo 用户信息
- Pagination 分页
请求数据相关
- 使用axios发请求，项目安装axios
全局注册在Vue原型上
Vue.prototype.$http=axios
//发请求带参数时，需用params:{}包裹起来
this.$http.get('/',{params:{}})
-
实例加载完成前请求数据 beforeMount
页面渲染时，某些元素需要动态绑定，如 <img :src="..."> ，否则获取不到更新的数据 -
报错：
Cannot read property 'loginname' of undefined
异步请求获取数据时，由于数据时异步获取的，所以一开始是没有该数据属性的
我将获取的数据放入一个对象dataList，里面的数据类似{author:{avatar_url:"",logginame:""}}
在这个数据中，由于初始值dataList.author是一个空对象（undefined），
author.loginname相当于undefined.loginname，故报错。
(后来异步请求拿到数据就渲染了，页面看着是正常的，但控制台的报错会影响之后的操作)
解决方法两种：
① 在标签上加 v-if="dataList.author"
② 在数据未加载完成前，整个页面只渲染一个loading.gif
路由跳转
- 路由跳转传递多个参数，用 & 拼接，如
path:'/topic/:id&author=:name'
// /:第一个参数&自定义变量名=:第二个参数
// 配置路由
name: 'article',
path: '/topic/:id&author=:name',
components: {
main: Article,
slideBar: SlideBar
}
// A组件中跳转
<router-link :to="{name:'article',params:{id:item.id,name:item.author.loginname}}">
</router-link>
// B组件获取参数
this.$route.params.id
this.$route.params.name
- 假如要跳转的路由和当前路由是同一个，
虽然传递的参数不一样，但浏览器默认为同一路由，页面不会重新渲染。
此时，可用watch方法：观察Vue实例上的数据变动，只要指定的数据改变就会执行预定的函数。
// 监视 $route ，接的参数为新值和旧值，当值发生改变（自动检测），执行里面的方法
watch:{
$route:function(to,from){
this.getData()
}
}
其他
-
过滤器的代码顺序：
main.js中，我原本先写Vue实例，再写过滤器，
结果，在子组件中，第一次加载OK，但页面刷新就报错：
[Vue warn]: Failed to resolve filter: formatDate
解决方法：
应该先全局注册过滤器，写在上面，再写vue实例
Vue.filter()
new Vue() -
上传github，因路径问题无法预览
解决方法：
// 先打包
npm run build // 自动创建dist文件夹
// config 路径下的index.js ，修改build配置
// assetsPublicPath: '/' 绝对路径改相对路径
assetsPublicPath: './'
// productionSourceMap:true 改为
productionSourceMap: false
网友评论