Быстрое исправление пустой страницы и noscript при обслуживании приложения Vue

Привет всем, еще один #10stips сегодня.

Что такое #10stips? Рубрика, в которой вы решаете вопросы кодинга в течение 10 секунд и предотвращаете свое психическое здоровье.

Здесь все самое основное, так что если вы продвинутый javascript/Vue разработчик и не хотите смеяться вслух, просто пропустите это.

Я все равно решил опубликовать ее, потому что ответы на StackOverflow на тот же вопрос потратили мое время.

Решение было намного проще, и я чувствовал себя идиотом.

На самом деле, это была моя вина… но, похоже, такое случается часто, поскольку в интернете много подобных запросов.

Так что это может быть полезно.

Проблема с App.vue

Посмотрите на этот базовый компонент:

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |

    <!-- same as previous because router-link always look for a name attribute inside the routes object -->
    <router-link :to="{ name: 'About' }">About</router-link>
  </nav>

  <!-- a component from the route will be injected here (eg /about) -->
  <router-view />
</template>

У нас есть 3 ссылки на роутер. Вторая и третья загружают один и тот же About view… но вместо строки я передаю объект с атрибутом name.

Это возможно, потому что Vue ищет атрибут name внутри каждого объекта маршрута. Вот эти маршруты:

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]

Если вы запустите приложение с помощью npm run serve, вы получите пустую страницу (wtf!!).

Проанализировав код, вы увидите следующее:

<noscript>
   <strong>We're sorry but demo-jobs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>

Быстрое исправление с объяснением

Вы заметили разницу?

В маршрутах у меня

а в router-link я написал

да 😉 опечатка. строка не совпадает. должна быть в нижнем регистре.

Но поведение интерпретатора Vue странное и у вас нет явных ошибок на консоли. Возникнет головная боль.

Теперь, когда я спас вам жизнь, оставьте большой палец вверх 🙂

Увидимся в следующий раз,
Мэтт