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

最新推荐文章于 2024-07-11 13:01:52 发布

weeqe11

最新推荐文章于 2024-07-11 13:01:52 发布

阅读量607

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-js

本文链接：https://blog.youkuaiyun.com/ZhangYaBo_Code/article/details/80910200

vue-js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了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不能检测以下变动的数组

当你利用索引值直接设置一个项时

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  //对象内部的属性监听，也叫深度监听
    }
   }