I build an application. I have a header with the title of my page. Currently, I use view-router to define my titles.
{
path: '/events',
name: 'events',
component: Events,
meta: {
title: 'Liste des événements'
}
}
And in my blade view, in my header.blade.php I'm doing this to display the title
<h2 class="header__title title-header">
#{{ $route.meta.title }}
</h2>
It work BUT when I have a dynamic data, necessarily, it does not work. For example, when I post a post, how can I do to earn my title?
{
path: '/events/:id',
component: Event,
name: 'Event',
meta: {
title: 'my dynamic title',
page: 'event',
},
How to recover the title of the post page? I have the name of the post in my post, but I can not access it from my header ...
I do not have access to the other components. These are components coming from element-ui.
Thank you in advance
In your router, before export default router you can add
router.beforeEach((toRoute, fromRoute, next) => {
window.document.title = toRoute.meta && toRoute.meta.title ? toRoute.meta.title : 'Home';
next();
})
This will read the meta title if it exists and it will update the page title.
Or you can add it like this
const router = new Router({
beforeEach(toRoute, fromRoute, next) {
window.document.title = toRoute.meta && toRoute.meta.title ? toRoute.meta.title : 'Home';
next();
},
routes: [
...
]
})
Don't forget to change the default title value from Home to something else - maybe name of your project
Related
I'm using Vue 2.6.12, Laravel and Inertia.
When using vue-meta to alter the meta title it displays 'undefined' for a split second when loading any page.
Im using Inertia, so the routing is on Laravels side and uses Inertia to pass the Vue component name and data to the frontend.
//app.js
new Vue({
metaInfo: {
titleTemplate: 'Inertia: %s'
},
render: h => h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
},
}),
}).$mount(el)
//Index.vue
export default {
metaInfo: {
title: 'User list'
}
}
It generally works, but it seems to stop working while Inertia requests are being processed / recieved / sent.
How do I prevent this?
what I understood that you want to load and manipulate metadata of the html page.
This cannot be manipulated unless you create a slot in the header, or place a prop so that each time you pass parameters to it it changes, with a layout.!
the most ideal thing would be that you use it inside the router:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: 'Home Page - Example App',
metaTags: [
{
name: 'description',
content: 'The home page of our example app.'
},
{
property: 'og:description',
content: 'The home page of our example app.'
}
]
}
}
i dont expert in english.! will it really help
enter link description here
I want to be able to update the URL when a user clicks on a tab defined in v-tab. That way, the url can be shared. When another user uses that shared url, they should be able to start with the same tab that's defined in the URL. Is this possible?
You can just attach a method to the #click event of the tab element, which will change the route on click.
If you want to automatically change the selected tab when the page is loaded, you can get the current route and simply set the tab in mounted() hook:
<v-tabs
v-model="selectedTab"
>
<v-tab
v-for="tab in tabs"
#click="updateRoute(tab.route)
>
...
data () {
return {
selectedTab: 0,
tabs: [
{
name: 'tab1',
route: 'route1'
},
{
name: 'tab1',
route: 'route1'
}
]
}
},
mounted() {
// Get current route name
// Find the tab with the same route (property value)
// Set that tab as 'selectedTab'
const tabIndex = this.tabs.findIndex(tab => tab.route === this.$route.name)
this.selectedTab = tabIndex
},
methods: {
updateRoute (route) {
this.$router.push({ path: route })
}
}
I have a problem with vue routes. I am using laravel 6 with vue#2.6.10
I want to create the actions button in the header dynamically (the actions are different which depends on the component). This AppHeader component is on every component and on the current component I want to create in the header the events for the current component.
For example the component CategoryDetails I want to have two actions in the header (save and exit).
The route foe the category is this:
path: '/',
redirect: 'dashboard',
component: DashboardLayout,
children: [
{
path: '/categories',
component: Category,
name: 'category',
meta: {
requiresAuth: true
}
},
{
path: '/categories/:CategoryID',
component: CategoryDetails,
name: 'category-details',
props: true,
meta: {
requiresAuth: true
}
},
]
In the component CategoryDetails:
<template>
<div>
<app-header :actions="actions"></app-header>
// other code
</div>
</template>
<script>
import AppHeader from "../../layout/AppHeader";
export default {
name: "CategoryDetails",
components: {AppHeader},
data() {
actions: [{label: 'Save', event: 'category.save'}, {label: 'Exit', event: 'category.exit'}],
},
mounted() {
const vm = this;
Event.$on('category.save', function(){
alert('Save Category!');
});
Event.$on('category.exit', function(){
vm.$router.push({name: 'category'});
});
}
}
</script>
I crated the action object which tells the header component what events to emit and listen to them in this component.
In the AppHeader component:
<template>
<div v-if="typeof(actions) !== 'undefined'" class="col-lg-6 col-sm-5 text-right">
{{ btn.label }}
</div>
</template>
<script>
export default {
name: "AppHeader",
props: [
'actions'
],
methods: {
onActionClick(event) {
Event.$emit(event);
}
}
}
</script>
The Event is the "bus event" defined in the app.js
/**
* Global Event Listener
*/
window.Event = new Vue();
So... let`s tested :)
I am in the category component. Click on the category details ... the actions are in the header (save and exit). Click on exit...we area pushed back to the category component... click again to go in the category details and click save ... the alert appears TWICE.
Exit and enter again ... the alert "Save Category!" appears 3 times.....and so on ...
Why ?
I think the issue is not with your routes. I don't know but try testing with your event locally (not globally) in the component of interest. There may be duplicate action (CategoryDetails).
According to this post: https://forum.vuejs.org/t/component-not-destroying/25008/10
I have to destroy the "zombie effect"
destroyed() {
Event.$off('category.save');
Event.$off('category.exit');
}
I am using laravel 5.8 and Vuejs2
How to prevent disappear edit id from router param when refresh page
This is my router link
<router-link :to="{ name: 'editEmployee', params: { id:employee.id } }"
title="Edit">
Edit
</router-link>
and this is my defined route
{ path: '/editemployee', component: require('./components/EditEmployee.vue').default, name: 'editEmployee',meta: {title: 'Edit Employee' } },
And this is how am checking param id in editEmployee component
created() {
if (this.$route.params.id) {
this.editMode = true;
this.loadUser(this.$route.params.id);
}
}
But when i refresh page the param id is disappearing from route.
how can i prevent disappearing id from route when i refresh page
Anyone can help me?
thanks in advance.
You forgot to include the id param in your route
path: '/editemployee/:id'
In my TaskList.vue I have the code below:
<template>
<div>
<ul>
<li v-for="task in tasks" v-text="task"></li>
</ul>
<input type="text" v-model="newTask" #blur="addTask">
</div>
</template>
<script>
export default {
data(){
return{
tasks: [],
newTask: ''
}
},
created(){
axios.get('tasks')
.then(
response => (this.tasks = response.data)
);
Echo.channel('task').listen('TaskCreated', (data) => {
this.tasks.push(data.task.body);
});
},
methods:{
addTask(){
axios.post('tasks', { body: this.newTask })
this.tasks.push(this.newTask);
this.newTask = '';
}
}
}
</script>
When I hit the axios.post('tasks') end point, I got duplicate result in my current tab that i input the value and the another tab got only 1 value which is correct.
To avoid this, I tried to use
broadcast(new TaskCreated($task))->toOthers();
OR
I put $this->dontBroadcastToCurrentUser() in the construct of my TaskCreated.php
However, both methods are not working. Any idea why?
The image below is from network tab of mine. One of it is pending, is that what caused the problem?
https://ibb.co/jpnsnx (sorry I couldn't post image as it needs more reputation)
I solved this issue on my Laravel Spark project by manually sending the X-Socket-Id with the axios post.
The documentation says the header is added automatically if you're using vue and axios, but for me (because of spark?) it was not.
Below is an example to show how I manually added the X-Socket-Id header to an axios post using the active socketId from Laravel Echo:
axios({
method: 'post',
url: '/api/post/' + this.post.id + '/comment',
data: {
body: this.body
},
headers: {
"X-Socket-Id": Echo.socketId(),
}
})
Laravel looks for the header X-Socket-ID when using $this->dontBroadcastToCurrentUser(); Through this ID, Laravel identifies which user (current user) to exclude from the event.
You can add an interceptor for requests in which you can add the id of your socket instance to the headers of each of your requests:
/**
* Register an Axios HTTP interceptor to add the X-Socket-ID header.
*/
Axios.interceptors.request.use((config) => {
config.headers['X-Socket-ID'] = window.Echo.socketId() // Echo instance
// the function socketId () returns the id of the socket connection
return config
})
window.axios.defaults.headers.common['X-Socket-Id'] = window.Echo.socketId();
this one work for me..!!