Vue中遇见的问题

一、自定义属性与获取自定义属性

//自定义属性 ：data-自定义属性名

    <div :data-test='SetTest'></div>

//获取自定义属性值：event.target.dataset.自定义属性名

    const GetTest = event.target.dataset.test;
    
    或
    
    const { test } = event.targrt.dataset

二、引入css样式

   import  'CSS文件路径地址' 

三、Vue Router的 base 属性

 如果设置了 base  则会在地址后面添加 base 的设置 内容（所有路由都会添加）

let router = new VueRouter({
    
    base:'/piperack'

})

 

四、重写 push 与 replace 方法

        不重写 push 与 replace  则会 出现重复点击跳转路由 则会出现报错

//1、先把VueRouter原型对象的push方法，保存一份

let OriginPush = VueRouter.prototype.push;

let OriginReplace =VueRouter.prototype.replace;

// 重写push | replace方法
VueRouter.prototype.push = function push(location){

    return  OriginPush.call(this,location).catch( (error) => error );

}
VueRouter.prototype.replace = function replace(location){

    return OriginReplace.call(this,location).catch( (error) => error )

}

五、配置路径  src 为  @ 

在 vue.config.js 里写配置

const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}
 
//配置 src 为 @
 chainWebpack: config => {

    config.resolve.alias
      .set('@', resolve('src') )
      .set('_v', resolve('src/views') )

  }

六、重置组件中的data数据

//重置组件data所有数据

Object.assign(this.$data, this.$options.data()

//如果再data中获取了router的传值,用this.$options.data()重置data时,data()里用this获取的props或method都为undefined   解决办法如下:

Object.assign(this.$data, this.$options.data.call(this))