项目技术问题归纳

vue问题

#(1)vouter的addRoutes方法---用户权限
//自定义添加路由方法,防止重复添加路由
#使用后
路由结构
const user = () => import('../views/user/list')
const routeArr = [
  {
    path: '/user/list',
    name: '用户管理',
    show: 'user',
    component: user,
  },
 ]
导航守卫
const commonUser = window.localStorage.getItem('menuList')
const commonUserRoute = routeArr.filter(function (page) {
  return commonUser.includes(page.show)
})
router.addRoutes(commonUserRoute)

router.beforeEach((to, from, next) => {
  if (to.name === null || to.name === '') {
    Message.error('您无权访问该页面！')
    next({ name: 'Error' })
  } else {
  next()
  }
})


#(2)var that=this的使用
	使用事项：
    axios请求中this指向这个回调函数,可以在axios请求外面设置that=this,that就会指向这个自身实例
	eg:methods:{
        searchMusic(){
            var that=this;
            axios.get("http://xxxxx.com").then(
            function(res){
            	that.mustlist=res.data.songs;//如果使用this就会代表这个axios回调函数    			
            }
            )
        }
    }
	`可以使用箭头函数代替函数就不会出现在实例中this指向问题`
    
#(3)router和route的区别 
#this.$router和this.$route的区别
	1.this.$router是VueRouter实例方法，是全局路由的，可以使用this.$router.push()方法跳转路由，但会留下history记录，this.$router.replace()替换路由不会留下记录
    	方法:
		$router.push	
        // 命名的路由
           this.$router.push({ name: 'user', params: { userId: 123 }})
        // 带查询参数，变成 /register?plan=123
           this.$router.push({ path: 'register', query: { plan: '123' }})

		$router.go
		// 页面路由跳转 前进或者后退
		this.$router.go(-1) // 后退

	2.this.$route是当前路由,包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。
      方法：
    	1.$route.path
      		  字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
        2.$route.params
              一个 key/value 对象，包含了 动态片段 和 全匹配片段，
              如果没有路由参数，就是一个空对象。
        3.$route.query
              一个 key/value 对象，表示 URL 查询参数。
              
#(4)/deep/和>>>
	在style用scoped属性实现组件的私有化时，深层样式不生效使用/deep/和>>>
        
	/deep/可以用于各种预处理器(/deep/在vue 3.0会报错,/deep/在vue 3.0会报错)
		
    >>>只用于css,(scss,less,scss无法解析>>>)

echarts图表问题

#(1)echarts重绘问题
	需要将数据清空，不然会在之前的图表后面追加图表数据绘图
#(2)

antdVue框架问题

#(1)slot/slot-scope插槽问题

#(2)v-decorator表单校验
用于表单标签里面
v-decorator=[
    'name',
    {
        rules:[//设置校验规则
			{	
                initialValue: "",//初始化值，也就是默认值,可不写
                required:true,//必须
                message:'xxxxxx',//未输入提示信息，
                pattern:/^     &/,  //正则规则，可选
            }            
        ]
    }
]
在script中
	data(){
        form:this.$form.createForm(this)//表单创建后可以使用form方法
    },
	methods:{
        sumbit(){
           this.form.validateFields((err, values) => {//获取输入表单的数据
            if (!err) {
              console.log('Received values of form: ', values);
            }
          });
        }
    }

	this.form.resetFields() 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 

#(3)
在中使用实现自定义对话框页脚内容
	eg:
	
      
      
Some contents...
      
Some contents...
    


#(4)