VUE-记录学习过程中遇到的一些问题

本文为记录一些学习过程中所遇见的问题，以及解决方案，如有不合理之处欢迎指正。

一、关于Vue中所遇问题

页面跳转及传参

页面跳转有两种，一种为路由跳转，一种为组件跳转；
1.路由跳转

// 不带参，地址开头有反斜杠 '/' 表示该路径是根路径，不会在现有地址后进行拼接，不加就会；
this.$router.push('跳转路由地址');
// 一般就-1返回上一页;
this.$router.go(n);
// query传参，就算刷新页面参数也会保留，但是会在浏览器地址栏显示参数;
this.$router.push({ path: '路径', query: {参数} });
// query接参,注意一个是router一个是route;
this.$route.query;
// params传参，刷新页面数据就会丢失，但不会在浏览器地址栏显示参数；
this.$router.push({ name: '必须为路由名', params: {参数} });
// 接参
this.$route.params;

2.组件跳转

<!-- component中可以像正常的组件一样传参，调用方法 ‘：’，‘@’ -->
<component :is="componentName"> </component>

import Test from '';
components: {Test },
// 切换componentName的值就可以实现页面的切换,componentName就是你引入组件之后你定的名字；
data() { return { componentName: 'Test' } }
// 组件之间传参，一般我常用的有 浏览器缓存，vuex，this.$emit(),this.$bus;

父子组件props传参，子组件能接收到父组件传过来的参数，但是页面数据未刷新；

在子组件处理方法没写错的情况下，我所遇到的有两种情况：

1.一种需要使用this.$set()解决vue未发现数据渲染的问题，vue监听不到数据新增属性；
刚找的解释原理的地址，点我就行

2.一种需要在watch中监听传过来的数据的变化，因为有可能你在子组件处理数据时，只拿到了第一次传进来的空数据或者说你定的默认数据，父组件通过请求对这个数据进行了处理，但是子组件并没有对第二次变化的数据进行处理，所以需要在子组件中添加watch监听数据变化，如果是数据是数组或对象需添加上deep属性；

filters的使用

<!-- 显示时会被显示为一，但是不会影响原本数据 -->
<div>{{ a | test }}</div>
<!-- 传2个参数 -->
<div>{{ a | test(2) }}</div>

需要注意的是，filters中的this为undefined；如果需要使用this使用computed或者methods；

// filters的用法；
data(){ return { a: 1 } },
filters: {
        test() {
            return '一';
        }
    }

computed传参

computed: {
        test() {
            return v => {
                return v;
            };
        },
      }

路由权限

路由权限我用过的有两种，第一种根据不同用户，后端返回相应路由；

路由文件中只写公用的路由或者说白名单路由，登陆之后从后端拿取用户的路由，然后这个就看需不需要处理，这个具体情况具体分析，拿到后端返回的路由数据之后在路由守卫中使用addRoutes()将路由加入其中就行；
第二种就是后端返回权限字符，事先在项目中配置好所有的路由配置，这里强调一点，这里路由也分为公用路由，和需要做权限处理的路由，他们需要定义在两个变量里，也是和第一种方式差不多的处理方式，登陆之后拿到权限数据，处理路由，然后addRoutes加入路由表中；

这个是权限表控制路由的截图，后端返回路由那种项目中不好截图；

store.dispatch(‘permission/setRoutes’)中就是我处理路由的方法

一时之间忘了学习vue的过程中还遇到过哪些问题，后面想起来或者遇到再更新。。。

二、关于css中遇到的问题

三、关于其他问题

循环执行多个promise

// forEach等方法不会等待上一个请求执行完，再执行下一个；
async test(){
    for(let i; i < 5; i++){
        await this.requestFunc()//你发送请求的方法
    }
}

element-table使用flex时，表格拉长超出父元素的解决方法

包裹el-table的父元素用relative定位，el-table用绝对定位，父元素和子元素用一样的高；