实习日记 6/16 边缘云首页等页面绘制

目标：

1、绘制边缘云三个页面的大体结构（配置路由？功能不明确）

2、研究权限管理，菜单权限，按钮权限、以及想一下不同权限页面的按钮功能不同如何实现。或者什么的了解一点新东西，然后练一下，加在项目里面

3、看看公司项目里面封装的东西=>为什么封装、好处、怎么自己封装。找一个有意思的自己学会实现然后就可以自己设置、然后项目里也可以写亮点了，欸嘿

4、对然后力扣螺旋矩阵

开干

1、√

看公司项目路由跳转用的是$router.replace

用push和repalce的区别：

$router.push()本质是向history栈中添加一个路由（看起来是切换，实际是添加history记录）

$router.replace()替换路由，没有历史记录，点击返回会跳转到上上个页面

路由也可以通过跳转的时候传递参数：（之前练过，又有点忘啦！打屁）

  tiaozhuan () {
      console.log(this.$msg)
      this.$router.push('/seconed')  // this.$router.push('path') 
    },
    tiaozhuan1 () {
      this.$router.push({   // this.$router.push('name') 
        name: `Seconed`, //一定要写name，params必须用name来识别路径 
        params: {
          name: this.name,  //刷新页面的话路径会被清空
        }
      })
    },
    tiaozhuan2 () {
      this.$router.push({
        name: `Seconed`,
        query: {
          name: this.name,
        }
      })
    },
    tiaozhuan3 () {
      this.$router.push(`/seconed/${this.name}`)
    },

就是把左侧菜单当作路由跳转链接，左侧菜单可以设置属性，然后我在index上面写的跳转路径

router

是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

然后我主页写好了样式，main写的路由占位符，然后把要跳转页面的路径设置为home页的children们，如果不设置为孩子，新开路径，原有页面样式就用不了，变成新页面。这个想想怎么弄？就是新页面但也能用之前设置的基本样式和结构？

2、实现权限管理

明天做

3、算是实现了基本的，后面可以自己封装组件试一下！https://segmentfault.com/a/1190000009506097 //看这篇文章学习一下

bug：

1、这里只能改变我自己写的盒子，用了element-ui的组件实现不了

2、样式用文件引入没解决 （解决啦，可以实现，开始是样式的类没写对）

 <div class="nav" id="head">  //想要更改颜色的盒子设置初始样式和id值
      边缘云后台管理系统
//然后我用了按钮弹出对话框在里面有单选按钮，然后点击确定提交
 SubmitColor (val) {
      if (val === '1') {
       // console.log('选中蓝色')
       this.color='blue';
       document.getElementById('head').setAttribute('class',this.color)
      }else{
            this.color='pink';
       document.getElementById('head').setAttribute('class',this.color)
      }
      this.dialogVisible = false
    },

//这里我是直接把样式卸载一个页面，我看有把样式单独写一个页面然后引入，但是我写了却没有用，明天问一下师傅咋回事？
.nav {
  position: relative;
  background-color: rgb(139, 136, 136);
  font-size: 30px;
}
.blue{
     position: relative;
        background-color: rgb(49, 125, 240);
         font-size: 30px;
}
.pink{
   position: relative;
  background-color: rgb(238, 190, 190);
  font-size: 30px;
}

//引入css样式表的形式

//在main.js里面引入样式文件
import "@/assets/theme.scss"

//theme.scss
.nav {
    position: relative;
    background-color: rgb(139, 136, 136);
    font-size: 30px;
}
.blue{
    font-size: 30px;
    position: relative;
    background-color: rgb(49, 125, 240);
}
.pink{
    font-size: 30px;
    position: relative;
      background-color: rgb(231, 161, 161);
}

setAttribute() 这个方法用来拿对象

setAttribute() 方法用于创建或改变某个新属性。