vue记录和打包后空白页的问题

本文介绍了Vue.js项目中常见的问题及解决方案,包括SASS配置、打包后页面空白、数组变动检测、参数传递方法区别(params与query)、监听对象变化等,并提供代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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  //对象内部的属性监听,也叫深度监听
    }
   }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值