在Vue的主文件中添加beforeEach时，Vue路由器路由器视图不起作用答案

【问题标题】：Vue router router-view not working when add beforeEach in Vue's main file在Vue的主文件中添加beforeEach时，Vue路由器路由器视图不起作用
【发布时间】：2022-09-23 20:58:30
【问题描述】：

当我在路由器常量中添加 beforeEach 方法时，App.vue 路由停止工作：

main.ts：

import { createApp } from \'vue\'
import \'./tailwind.css\'
import App from \'./App.vue\'
import { createRouter, createWebHistory } from \'vue-router/auto\'
import { createHead } from \'@vueuse/head\'

const app = createApp(App)
const head = createHead()



const router = createRouter({
  history: createWebHistory(),
}).beforeEach((to, from, next) => {
  const publicPages = [\'/\'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = !!sessionStorage.getItem(\'Orcamento:token\');

  if (authRequired && !loggedIn) {
    next(\'/login\');
  } else {
    next();
  }
});

app.use(router)
app.use(head)
app.mount(document.body)

应用程序.vue：

<script setup lang=\"ts\">
import { computed } from \"vue\";
import useProject from \'../src/stores/index\';

const project = useProject();
const loggedIn = computed(() => project.status.loggedIn);

</script>

<template>
  <navbar v-if=\"loggedIn\" />
  <div>
    <header class=\"bg-white shadow\" v-if=\"$route.meta.title\">
      <div></div>
    </header>
    <main>
      <router-view />
    </main>
  </div>
</template>

我正在使用 Vue 3 和 devDependecyunplugin-vue-router

错误消息：

[Vue 警告]：无法解析组件：路由器视图如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。在<App>

[Vue 警告]：在渲染期间访问了属性 \"$route\"，但未在实例上定义。在<App>

[Vue 警告]：渲染函数执行过程中出现未处理的错误在<App>

未捕获的类型错误：无法读取未定义的属性（读取 \'meta\'）在Proxy._sfc_render (App.vue:19:9)

标签： javascript typescript vue.js vuejs3 vue-router

【解决方案1】：

问题是createRouter() 返回一个路由器，但beforeEach() 没有返回路由器。

所以当你在做

// incorrect ❌

const router = createRouter().beforeEach();

路由器最终是undefined，因为您将链接的beforeEach 返回的值分配给它，而不是分配createRouter 返回的值。

编写代码正在执行的操作的更详细的方式：

// incorrect ❌

let router = createRouter();
router = router.beforeEach();

// router is now `undefined`

要将路由器正确分配给router：

// correct ✅

const router = createRouter();
router.beforeEach();

/* 
 * here router is still the return value from `createRouter()`, 
 * so it can be exported, used in the app, etc...
 */

【讨论】：