vue用sass可能需要额外配置
vue打包项目之后发现页面是空白的
解决方法 在webpack.prod.conf.js里面的output里加上 publicPath:'./'
cnpm i sass-loader node-sass --save-dev
由于JavaScript限制,vue不能检测以下变动的数组
- 当你利用索引值直接设置一个项时
vm.items[index] = newValue
- 当修改数组的长度的时候,例如
vm.items.length = newLength
解决方法:
Vue.set(this.items, index, newValue)
// this.$set 实例方法 该方法是Vue.set的一个别名
this.$set(this.items, index, newValue)
// 解决第二类问题的方法 可以用splice
this.items.splice(index, howmany, item1,.....)
vue传参params和query的区别
params: /router1/:id,/router/123,/router1/789 这里的id叫做params
query: /router1?id=123 这里的id叫做query
当你使用params方法传参的时候,要在路由后面加参数名 query是拼在url后面的参数
params demo
const app = () => import('@/pages/app')
{
// 接收参数的路由,使用params传参要参数名,这里的id就是参数名 this.$route.params.id 来获取传的参数
path: '/app/router1/:id',
name: 'router1', // 路由的名字
component: resolve => require(['../page/my/my.vue'], resolve) //路由懒加载
component: app //路由懒加载
}
// params方式传参和接收参数
<router-link to="/query/555"></router-link>
<router-link :to="{name: 'params', params: {id: 222}}"></router-link>
this.$router.push({
name:'xxx'
params:{
id:id
}
})
// 接收参数:
this.$route.params.id
// query方式传参和接收参数
<router-link tag="div" :to="{path:'/rateStar?id=2222'}"></router-link>
<router-link :to="{name: '/rateStar', query: {id: 222}}"></router-link>
this.$router.push({
path:'/xxx'
query:{
id:id
}
})
// 接收参数:
this.$route.query.id
在展示上面,query类似ajax的get传参,params类似于post,前者在浏览器中显示参数,后者不显示
接收参数都是类似的 this.$route.query.xxx
和 this.$route.params.xxx
注意,是$route
用router-link的话query是path,params是name
watch 不能监听到对象的变化解决方法
watch: {
playList: {
handler: function() {
// 方法
},
deep: true //对象内部的属性监听,也叫深度监听
}
}