Привет всем, еще один #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 странное и у вас нет явных ошибок на консоли. Возникнет головная боль.
Теперь, когда я спас вам жизнь, оставьте большой палец вверх 🙂
Увидимся в следующий раз,
Мэтт