1. 程式人生 > >vue記錄和打包後空白頁的問題

vue記錄和打包後空白頁的問題

vue用sass可能需要額外配置

vue打包專案之後發現頁面是空白的

解決方法 在webpack.prod.conf.js裡面的output里加上 publicPath:'./'
cnpm i sass-loader node-sass --save-dev

由於JavaScript限制,vue不能檢測以下變動的陣列

  1. 當你利用索引值直接設定一個項時
vm.items[index] = newValue
  1. 當修改陣列的長度的時候,例如
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.xxxthis.$route.params.xxx
注意,是$route 用router-link的話query是path,params是name

watch 不能監聽到物件的變化解決方法

watch: {
  playList: {
      handler: function() {
           // 方法
      },
      deep: true  //物件內部的屬性監聽,也叫深度監聽
    }
   }