vue記錄和打包後空白頁的問題
阿新 • • 發佈:2019-02-17
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 //物件內部的屬性監聽,也叫深度監聽
}
}