0629-vue-router &自定义插件

插件文件.js

let vue_app = null;
let router_app = null;
import{ reactive } from "vue";

function VerifyLogin(login_page)
{
    if(!vue_app.config.globalProperties.$is_login){
        router_app.push({ name:login_page})
    }

}
function Login(user_name, id, uuid, img_url,to)
{
    vue_app.config.globalProperties.$is_login.user_name = user_name;
    vue_app.config.globalProperties.$is_login.id = id;
    vue_app.config.globalProperties.$is_login.uuid = uuid;
    vue_app.config.globalProperties.$is_login.verify = true;
    router_app.push({name:to})
}
function useLogin(){
    //返回一个响应性的
    return reactive(vue_app.config.globalProperties.$is_login);
}
const verify_plugin_option = {
    install(app) {
        vue_app = app;
        router_app = app.config.globalProperties.$router;
        //定义出来$is_login
        app.config.globalProperties.$is_login = {user_name:'默认值会出现在调用自定义验证插件的页面',id:null,uuid:null,verify:null}
    }
}
export default verify_plugin_option;
export { VerifyLogin,Login,useLogin}

main.js 应用

import {createApp} from "vue";
import VueAppOptions from "./components/VueAppOptions.vue";
//加载路由组件
import RouterApp from './routers'
//引入自定义插件
import Verify from './verification'
const vue_app = createApp(VueAppOptions);
vue_app.use(RouterApp);
//使用自定义插件
vue_app.use(Verify);
// import GetTest from './self_test_plug'
// vue_app.use(GetTest)
vue_app.mount('#app')

login.vue 子组件引用

<script setup>
import { v4 as uuid_v4 } from 'uuid'
import { Login }from "../../verification";
import {get_mess} from "../../self_test_plug";
const img_url = 'https://p7.itc.cn/images01/20210914/a8327b8659794afdb3f83974489040c2.png'
function user_login(){
  Login('疯狂的小鸡仔','Math.floor(Math.random() *100000) + 100000',uuid_v4(),img_url,'index')
}
// function test_plugin(){
//   get_mess('大眼睛牛牛','admin')
//
// }

</script>

index.vue

<script setup>
import ImageText from "../widget/ImageText.vue";
//外部引入 自定义插件
import { useLogin } from "../../verification";
import { use_test_plugin } from '../../self_test_plug'
const login = useLogin();
console.log(login)
// const test_plugin = use_test_plugin()
// console.log(test_plugin)



</script>