vue3中路由里面怎么获取全局变量

Question

import {
    createRouter,
    createWebHashHistory
} from 'vue-router'
import {
    ElNotification
} from 'element-plus'
import {
    getCurrentInstance
} from 'vue'
import Frame from './frame/frame.js'
import Camera from './camera/camera.js'
import Face from './face/face.js'
import Inspection from './inspection/inspection.js'
let baseRoutes = []
let routes = baseRoutes.concat(Frame, Camera, Face, Inspection)
// import store from "../store/common/system.js";

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 这里会报错，没有appContext这个属性，打印ctx.getCurrentInstance为null
const ctx = getCurrentInstance().appContext.config.globalProperties;
    
router.beforeEach((to, from, next) => {
    if (JSON.stringify(to.meta) === '{}') {
        ElNotification({
            title: '温馨提示',
            message: '404！当前页面不存在',
            type: 'error'
        })
        setTimeout(() => {
            window.location.href = '/'
        }, 1000)
    } else {
        // 设置当前页面标题
        if (to.meta.title) {
            console.log("设置路由", ctx);
                        // 不用管这里的store
            document.title = store.state.applic_sname + "-" + to.meta.title;
        } else {
            console.log('哈哈哈')
        }

        next()
    }
})

export default router

在我的router下面index.js中想引用全局变量来设置title，但是ctx的获取为空，查询问题应该是只能在setup中引用，但是在这里写一个setup() {}又是错误的，那该怎么写呢，main.js中的全局变量是写好了的，其他地方引用没问题

Answer 1

【以下回答由 GPT 生成】

在Vue3中，可以通过创建一个全局变量来在路由中获取它。具体的实现步骤如下：

1. 首先，在你的Vue项目中，找到一个合适的位置来创建全局变量。你可以选择在src/main.js文件中，或者创建一个单独的文件来存放全局变量。在这个文件中，你可以使用Vue的app.config.globalProperties来创建全局变量。例如：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$myGlobalVariable = 'This is my global variable'

app.mount('#app')

在上面的代码中，我们将$myGlobalVariable设置为一个字符串，但你可以根据自己的需要设置为任何类型的数据。

1. 然后，在你的路由文件中，你可以通过访问to或from对象的router属性来获取全局变量。例如：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  // 路由配置
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  const myGlobalVariable = to.router.app.config.globalProperties.$myGlobalVariable
  // 在这里可以使用myGlobalVariable变量
  // ...
  next()
})

在上面的代码中，我们通过访问to.router.app.config.globalProperties来获取全局变量$myGlobalVariable的值，并将它赋给myGlobalVariable变量。在beforeEach导航守卫中，你可以使用myGlobalVariable变量来进行后续的逻辑处理。

通过以上步骤，你就可以在Vue3的路由中获取全局变量了。如果你有任何其他问题，请随时向我提问！

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7481801
• 你也可以参考下这篇文章：vue路由(router)设置：父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失
• 除此之外, 这篇博客: vue3中怎么使用router路由呢&页面跳转传参怎么搞呢中的 在基础页怎么获取router文件夹中index.js里的数据呢？ 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^