学习vue不常用容易忘的东西

最新推荐文章于 2023-03-03 18:11:46 发布

铂金工作室

最新推荐文章于 2023-03-03 18:11:46 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/weixin_43740023/article/details/118465714

版权

添加element依赖

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

全局引入axios

import axios from './axios'
Vue.prototype.$axios = axios

引入mockjs

require("./mock.js") //引入mock数据，关闭则注释该行

css相关

/* 弹性布局 */
display: flex;
/*垂直方向居中*/
align-items: center;
/* 文字居中 */
text-align: center;
/* 靠左布局 */
float: left;

路由声明周期函数

/**
 * router.beforeEach就是路由进入前的周期
 * to:跳转到哪个路由
 * from:从哪个路由来
 * next:让他继续走
 */
router.beforeEach((to, from, next) => {
   
});

动态添加路由

let nav = [
        {
            title: "系统管理",
            name: "SysManage",
            icon: "el-icon-location",
            path: "",
            component: "",
            children: [
                {
                    title: "用户管理",
                    name: "UserManagement",
                    icon: "el-icon-user",
                    path: "/sys/user",
                    component: "sys/UserManagement",
                    children: []
                },
            ]
        },
    ];

 let newRouter = router.options.routes;//获得我们现在的路由信息

nav.forEach(menu => {
                if (menu.children != null) {//如果子组件不为空
                    menu.children.forEach(children => {
                        //转化成路由对象
                        let route = menuToRoute(children);
                        //把路由添加到路由管理中
                        if (route) {
                        //0并不是想添加到的路由
                            newRouter[1].children.push(route)
                        }
                    })
                }
            //第一次加载为false,后面避免后面刷新重复加载
            routerState = true;
            store.commit("changeRouterState", routerState);
            //对路由进行绑定,vue的路由可以通过addRoutes动态添加
            router.addRoutes(newRouter);
            });

//导航转成路由
//路由就三个参数name,path,component
function menuToRoute(children) {
    if (children.component != null) {
        //把导航里的参数变成路由参数
        let route = {
            name: children.name,
            path: children.path,
        };
        //路由里组件赋值方法的写法
        route.component = () => import('@/views/' + children.component);
        return route;
    } else {
        return undefined;
    }

}

全局使用methods分配权限

import Vue from "vue";
import menus from "./store/modules/menus";

Vue.mixin({
    methods: {
        hasAuth(perm) {
            //从全局参数拿到权限信息
            let authorization = this.$store.state.menus.authorizationList;
            return authorization.indexOf(perm) > -1;
        }
    }
})

//记得在main.js中引用
import global from './globalFun'

//之后在某个需要权限控制的按键调用这全局方法
<el-button type="primary" @click="addRole()" 
v-if="hasAuth('sys:user:save')">新增</el-button>

axios固定配置

import axios from "axios";
import router from "./router";
import Element from "element-ui"

axios.defaults.baseURL = "http://localhost:8081"

const request = axios.create({
    timeout: 5000,
    headers: {
        'Content-Type': "application/json; charset=utf-8"
    }
})

request.interceptors.request.use(config => {
    config.headers['Authorization'] = localStorage.getItem("token")
    return config
})

request.interceptors.response.use(
    response => {

        console.log("response ->" + response)

        let res = response.data

        if (res.code === 200) {
            return response
        } else {
            //更换别的框架的话记得换
            Element.Message.error(!res.msg ? '系统异常' : res.msg)
            return Promise.reject(response.data.msg)
        }
    },
    error => {

        console.log(error)

        if (error.response.data) {
            error.massage = error.response.data.msg
        }

        if (error.response.status === 401) {
            router.push("/login")
        }
        //更换别的框架的话记得换
        Element.Message.error(error.massage, {duration: 3000})
        return Promise.reject(error)
    }
)

export default request