Задача состоит в том, что при изменении переменной `autorized` в рамках обработки событий компонента роута AboutView.vue, необходимо изменить текст `TitleString` тега компонента RouterLink.
App.vue
<script setup>
import { defineComponent } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'
</script>
<script>
export default defineComponent({
data() {
return { TitleString: 'Войти' }
},
mounted() {
},
methods: {
_TitleUpdate(val) {
this.$data.TitleString = val;
console.log('_TitleUpdate => ' + val);
}
},
});
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="Редактор mydomain.ru" />
<p>Управление разделами сайта могут осуществлять пользователи успешно прошедшие авторизацию!</p>
<nav>
<RouterLink to="/" class="green">Главная</RouterLink>
<RouterLink @TitleUpdate="_TitleUpdate" to="/about" class="green">{{ TitleString }}</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>
Собственно сама идея вызвать из компонента роута обновление текста при помощи $emit. Но фишка в том, что this.$parent ссылается не на App.vue, а на сам роут :\
AboutView.vue
// ...
watch: {
autorized(newVal, oldVal) {
this.$parent.$emit('TitleUpdate', (newVal ? 'Войти' : 'Вы вошли как: ' + this.$data.login));
}
},
// ...
Сам роутер объявлен по дефолту
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
}
]
})
export default router
По сути я пытаюсь заменить текст ссылки RouterLink, который зависит от состояния компонента маршрута. Понимаю, что это возможно неправильный ход, но тем не менее, хотелось бы сразу понять как передавать параметры из комп. роута в рут и т.д. Можно просто накидать ссылок, если есть..
Есть еще второй вариант. У меня глобально объявлена некий класс, который отвечает за авторизацию пользователя. Он работает на основе axios, который возвращает результаты с некой задержкой. И получается, что метод mounted из рута не успевает, поскольку вызывается раньше чем успевает ответить бекенд. Можно было бы повесить простой хук на поле этого класса, но тоже, не знаю как :)
