前端路线--Vue(day19)

笔记

嵌套路由

views–>LayoutView.vue(框架页面)(主框架)
路由模块化:
router–>index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入模块化的路由
import { userRouter } from "@/router/modules/users.js"
import { productRouter } from "@/router/modules/product.js"


Vue.use(VueRouter);

const routes = [{
        path: '/',
        redirect: "/login"
    },
    {
        path: '/login',
        name: 'login', //命名路由
        component: () => import("@/views/UserLogin/UserLogin.vue")
    },
    {
        path: '/register',
        name: 'register',
        component: () => import("@/views/UserRegister/UserRegister.vue")
    },
    // 配置ElementUI路由
    {
        path: "/element",
        component: () => import("@/views/ElementUI/ElementUI.vue")
    },
    // 配置嵌套路由
    userRouter,
    productRouter

]

const router = new VueRouter({
    routes
})

export default router

router–>modules–>users.js

//路由模块化

//配置users的路由嵌套
let userRouter = {
    //此处必须把"/"放在这里,因为"/"代表根目录，在下面会找不到，并且在下面代表就是layout路由的孩子
    path: '/layout/',
    name: 'layout',
    component: () => import("@/views/LayoutView/LayoutView.vue"),
    children: [{
            path: "userlist",
            component: () => import("@/views/UserView/UserList/UserList.vue")
        },
        {
            path: "useradd",
            component: () => import("@/views/UserView/UserAdd/UserAdd.vue")
        },
        {
            path: "userlevel",
            component: () => import("@/views/UserView/UserLevel/UserLevel.vue")
        }
    ]
}

// 导出
export {
    userRouter
}

ElementUI的使用

<!--ElementUI的知识点-->
<template>
  <div class="Element">
    <!-- 按钮 -->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <br />
    <!-- 镂空按钮 -->
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <br />

    <!-- 圆角按钮 -->
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    <br />

    <!-- 原型按钮+ElementUI字体图标 -->
    <el-row>
      <el-button icon="el-icon-s-promotion" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-eleme" circle></el-button>
    </el-row>
    <br />

    <!-- 自己封装的好谷的按钮 -->
    <hg-button type="primary">好谷按钮--封装</hg-button><br />
    <hg-button type="danger">好谷按钮--封装</hg-button><br />
    <hg-button type="info">好谷按钮--封装</hg-button><br />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HgButton from "@/component/HgButton.vue";

// <!--
//       //1.下载element-ui
//       cnpm install element-ui --save
//      //2.main.js引入
//       import ElementUI from 'element-ui';
//       import 'element-ui/lib/theme-chalk/index.css';
//       Vue.use(ElementUI);

//    -->

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    HgButton,
  },
  data() {
    //这里存放数据
    return {};
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
</style>

自己封装组件

HgButton.vue–子组件
ElementUI.vue–父组件

<!-- 封装的按钮组件 -->
<template>
  <div class="hgbtn">
    <button :class="type">
      <slot></slot>
    </button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //传值可以分为静态传值(不绑定属性)和动态传值(绑定属性)
  props: ["type"],
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
.primary {
  background: blue;
  color: #fff;
}
.danger {
  background: red;
  color: #fff;
}
.info {
  background: #ccc;
  color: #fff;
}
</style>