欢迎访问永胜空间,好运加身,财源广进不是梦

Vue3和ThinkPhp8配合设置基础信息

  • 工作心得 @ 2024-10-11
  • 作者:顾永胜
  • 来源:0513.city

在Vue3加载页面中,通过服务器渲染生成基础数据,然后配置到Vue3中。

//设置全局配置信息
work.config.globalProperties.appConfig = {
    appDomain: "{:config('work.url')}",
    appName: "{:config('work.title')}",
    appAuthor: "{:config('work.author')}",
    appDescription: "{:config('work.description')}",
    appKeywords: "{:config('work.keywords')}",
};


vue-router配置动态加载视图文件

{
    path: "/partner/record.html",
    name: "partner_record",
    meta: { title: "手艺人基础信息登记" },
    component: () => import("/wexin/js/view/partner/record.js"),
}


vue-router动态更新文档标题

//动态更新页面标题
router.afterEach((tofromfailure=> {
    document.title = to.meta.title
        ? to.meta.title
        : work.config.globalProperties.appConfig.appName;

});


在组件中使用全局属性

//获取全局属性
const appConfig =
    getCurrentInstance().appContext.config.globalProperties.appConfig;
//获取和提交数据服务器路径
const route = {
    save: appConfig.appDomain + "private/partner/save.html",
    get: appConfig.appDomain + "private/partner/get.html",
};


以上是我自己摸索的方法,不代表是最优写法,一切以解决问题为原则,创新最优解。基本效果可以看上面的展示图片。

  • Vue3和ThinkPhp8配合设置基础信息