Как показать элемент навигационной панели только для определенных компонентов Vue.js?
Я использую приложение Vue.js с vue-router в компоненте из трех частей:
App.vue:
<template>
<div id = "app">
<head>
</head>
<NavbarComp/>
<div>
<div class = "middle">
<router-view/>
</div>
</div>
<FooterComp/>
</div>
</template>
<NavbarComp/> содержит кнопку входа в систему, которую я бы хотел, чтобы она отображалась только на целевой странице:
<template>
<div>
<nav>
<router-link to = "/" >
<h3>My Shining app </h3>
</router-link>
<router-link to = "/login">
<button v-if = "section='landing'"> Login</button>
</router-link>
</nav>
</div>
</template>
Я попытался определить section в магазине и определить секцию как вычисляемое свойство для каждого компонента:
section () {
this.$store.section = 'login';
}
но не удалось. Так что цените ваши подсказки.
Это работает. но на самом деле это должен быть v-if = "this.$route.name === 'landing'". Пожалуйста, ответьте, и я приму. Спасибо!
—
19.09.2018 14:55
Рад помочь :)
—
19.09.2018 15:01
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
3
855
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Измените v-if на кнопке, чтобы он был:
v-if = "this.$route.name === 'whatever-your-route-name-is'" // 'landing' according to your comment
Другие вопросы по теме
Как правильно глобально зарегистрировать и использовать компонент Vue Rangedate Picker?
Vue.js - дерево меню с быстрым фильтром: сворачиваемый и фильтр не работают вместе
Когда <router-view /> изменился, почему старый компонент router все еще может «$ on» и обрабатывать событие?
Как приложение Vue могло передать дополнительные параметры прослушивателю событий при использовании vm. $ Once ()?
Установите максимальные / минимальные значения datetimepicker при загрузке
Установите свойство title, если данные, возвращаемые из привязки, верны в vuejs
Как обработать событие, сгенерированное компонентом в v-for Vuejs
Uncaught TypeError: $ notify при создании глобального уведомления в vue
Vue.js показывает скрытие нескольких элементов со списком данных
Я получил сообщение об ошибке [Vue warn]: Ошибка при рендеринге: «TypeError: не удается прочесть свойство 'name' of undefined»
Похожие вопросы
Vue.js vuetify, как воспроизвести звуковой клип
Vue.Js как получить значение атрибута prop с идентификатором
Vue.js $ refs не определены
Динамические компоненты не работают в машинописном тексте в vue
Проблема с реактивностью свойства данных vueJS
Приложение Struts вместе с пакетом Vue.js Webpack
При нажатии меняет значки на остальных элементах - Vue2
Пользовательский стиль vuetify js
Vue.js не обнаруживает закрытие окна
Маршрутизатор по умолчанию: сохранить идентификатор для всех дочерних элементов
Попробуйте сделать
v-if = "this.$route.name === 'login-route-name'"