I don't know I'm about quite Vue, spent a day learning all hooks routes, tried throug regular hooks created, mounted and it still gives me null. Here is my component App where all other components are plugged in. I'm calling here mounted hook, so
basically it totally rendered this component, and we have a path + I wrapped evrythin in $nextTick just to be sure and it still returns me null name of a current router if I come to the website not from main url, but from children as for instance url/boys. I gave up long time ago getting this name of a router in children component where I need it, thought alright I'll just path it to children <the-nav/> that's where I need it. But it doesnt work event in parent and I need only name of a current router when I enter the website. That's it, sounds easy but went throught hell.
<template>
<div id="app">
<the-header/>
<the-nav/>
<div id="app__inner">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</div>
</div>
</template>
<script>
import TheHeader from "#/components/TheHeader.vue";
import TheNav from "#/components/TheNav.vue"
export default {
components : {
TheHeader,
TheNav
},
mounted()
{
this.$nextTick(() => {
console.log(this.$router.currentRoute.name);
})
}
}
</script>
You can actually use the exposed router functions inside this befoureRouteEnter function, used like so:
beforeRouteEnter (to, from, next) {
console.log(to.name);
next();
},
Please read some documentation on router Navigation guards:
https://router.vuejs.org/guide/advanced/navigation-guards.html
Make sure you have the name set on the router, otherwise name will be undefined. For example...
const routes = [
{
path: "/",
component: Home,
name: "Home" // Make sure route is named
},
];
Then in component you should be able to access the name in mounted hook, without nextTick (like mentioned in comment):
mounted() {
alert(`Route name is: ${this.$route.name}`);
}
DEMO
Related
I have a paginated component. The async setup() method is pulling data from an API to populate the page. It works fine when the route is directly loaded, but when I change the route to a different page slug (eg. clicking a router-link), the component is not reloaded and setup is not executed again to fetch the new data.
I guess I somehow want to force reloading the component?
This is my MainApp component it has the router view and fallback.
<router-view v-slot="{ Component }">
<Suspense>
<template #default>
<component :is="Component" />
</template>
<template #fallback>
loading...
</template>
</Suspense>
</router-view>
The router looks kinda like that. You see the page component takes a page_slug:
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "",
component: MainApp,
children: [
{
name: "page",
path: "page/:page_slug",
component: Page,
props: true,
},
// [...]
]
}
And this is how my Page component looks like. It uses the page_slug to load data from an API which is then used in the template:
<template>
<div> {{ pageData }} </div>
</template>
export default defineComponent({
name: "Page",
props: {
page_slug: {
type: String,
required: true,
},
},
async setup(props) {
const pageData = await store.dispatch("getPageData", {
page_slug: props.page_slug
});
return { pageData }
}
}
When I directly open the route, the fallback "loading..." is nicely shown until the data is returned and the component is rendered.
But when I do a route change to another page, then async setup() is not executed again. In that case the url in the browser updates, but the data just remains the same.
How can I solve this case? Do I have to force reload the component somehow? Or have an entirely different architecture to the data loading?
The answer is simple, when trying to create Vue 3 Single File Components (SFCs) in Composition API way as shown below:
<template>
<!-- Your HTML code-->
</template>
<script>
export default {
name: 'ComponentName',
async setup():{
// Your code
}
};
</script>
<style>
/*Your Style Code*/
</style>
<script>, will only executes once when the component is first imported. So, when the data have changed by other component, the component above will not updated or in other words not re-created.
To make your component re-created whenever it about to mount, you have to use <script setup> which will make sure the code inside will execute every time an instance of the component is created, but you need to re-write your script code with few changes in comparison when using setup() method, and also you are able to use both of scripts like this:
<script>
// normal <script>, executed in module scope (only once)
runSideEffectOnce()
// declare additional options
export default {
name: "ComponentName",
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// executed in setup() scope (for each instance)
</script>
Read this documentation carefully to have full idea.
I have a Vue application (which is basically a video player) that uses EventBus to communicate across components which normally cannot communicate easily. This worked perfectly when I was developing the video player, but now I have bundled it using Rollup, and when I try to put multiple instances of the video player on the same page, any Event one instance sends will also be picked up by all the other instances of the application.
Now in hindsight I understand why people don't seem to like the EventBus, but I can't find a great solution to either improve or replace it. I can't name the EventBus instances dynamically, because then the rest of my application won't be informed about the new name. I can't even use something like a videoId in my EventBus listeners to control the uniqueness, because then I will encounter the same problem if a video is on the same page more than once.
Some posts suggest VueX, but my app doesn't need to be stateful and it doesn't seem like a replacement for Event and listeners (though I could be wrong on that.) It seems like a lot of overhead for more functionality than I need. Again, I could be wrong.
I tried to remove as much irrelevant code as possible, but to give an idea of how I implemented my EventBus:
event-bus.js:
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;
MediaPlayer.vue:
<template>
<div>
<div>
<div id='media-player'>
<end-screen v-if="videoIsFinished"/>
<tap-video
ref="tapVideoRef"
:source='sourceUrl'
:videoId='videoId'
#videoEndHandler='videoEndHandler'
>
</tap-video>
<div id="control-bar-container">
<transition name="slide-fade">
<div v-show='(showControls || !playing)' >
<media-controls
:playing="playing"
:videoLength="videoLength"
/>
</div>
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
import TapVideo from './TapVideo.vue';
import EventBus from './event-bus';
export default {
data (){
return{
playing: false,
showControls: false,
videoLength: 0,
tapVideoRef: null
}
},
mounted() {
this.tapVideoRef = this.$refs.tapVideoRef;
EventBus.$on('videoLoaded', videoLength => {
this.videoLength = videoLength;
});
EventBus.$on('playStateChange', playing => {
this.onPlayStateChange(playing);
});
},
beforeDestroy() {
EventBus.$off(['playStateChange','closeDrawer']);
},
props: ['sourceUrl', 'platformType', 'videoId'],
}
</script>
In case anyone comes across this problem, I found a solution that works well for me. Thanks to #ChunbinLi for pointing me in the right direction - their solution did work, but passing props everywhere is a bit clunky.
Instead, I used the Provide/Inject pattern supported by Vue: https://v3.vuejs.org/guide/component-provide-inject.html
Some minimal relevant code:
The highest level Grandparent will provide the EventBus,
Grandparent.vue
export default {
provide() {
return {
eventBus: new Vue()
}
}
}
Then any descendant has the ability to Inject that bus,
Parent.vue
export default {
inject: ['eventBus'],
created() {
this.eventBus.$emit('neededEvent')
}
}
Child.vue
export default {
inject: ['eventBus'],
created(){
this.eventBus.$on('neededEvent', ()=>{console.log('Event triggered!')});
}
}
This is still a GLOBAL EventBus, so directionality of events and parental relationship is easy, as long as all components communicating are descendants of the component which "Provided" the bus.
I have a component showing multiple routes (Step1, Step2, Step3...) on after each other. I navigate and pass properties like
<router-view
#next-button-step1="
$router.push({
name: 'Step2',
params: { myprop: thisprop },
})
"
[...]
</router-view>
with the routes defined like
const routes = [
{
path: "/s2",
name: "Step2",
component: Step2,
props: true,
},
This works well, until I reload a page/route, because the the data is lost. So I kind of want to fetch the data from the parent, after the component is loaded.
One of my ideas was using the local storage, but this does not feel right.
I am a newbie to Vue and I would like to ask what's the best practice here. Is it vuex like described here Reload component with vue-router? I'd appreciate a hint.
If localStorage is suitable depends on the use case.
You say that data is lost when you reload the page/route. It's perfectly possible to store this data to prevent data-loss on route change/reload. But changing/reloading the page will only be solved either by storing data in localStorage (and retrieving from localStorage on page init), or storing it on the server and retrieving it on page init...
Vuex may help you with the route change/reload part, but even Vuex won't help you with the page change/reload.
I will show you an example of how to save the data for the first case: route changes and reloads, because this may be achieved without adding Vuex. We will do this by having the data inside a parent component and passing this data to our routes. When a route changes the data it should emit an update-event (including the updated data) and the parent should store the changed data.
I'll show an example scenario in which the parent holds all the data. The routes
are responsible for editing different aspects of the data. Each time i switch between a route the parent supplies the data.
A working example can be found here: https://jsfiddle.net/b2pyv356/
// parent component / app.vue
<template>
<div>
<router-view
:state="state"
#updatestate="updateState"
></router-view>
<pre>Parent state: {{state}} </pre>
</div>
</template>
<script>
export default {
data() {
return {
state: {
name: 'name',
lastname: 'lastname'
}
}
},
methods: {
updateState(state) {
this.state = state;
}
}
};
</script>
// page1.vue
<template>
<div>
Route 1: State is:
<pre>{{state}}</pre>
<div>
Name: <input v-model="state.name">
<button #click="$emit('updateState', state)">Save</button><br>
</div>
<router-link to="/page2">Next step</router-link>
</div>
</template>
<script>
export default { props: ['state'] }
</script>
// page2.vue
<template>
<div>
Route 2: State is <pre>{{state}}</pre>
Name: <input v-model="state.name">
<button #click="$emit('updateState', state)">Save</button><br>
<router-link to="/">Previous page</router-link>
</div>
</template>
<script>
export default { props: ['state'] }
</script>
Persisting data:
On updateState you could store the data in localStorage
You could store some data in the request url ($router.params) or page query string. This has limits: some browsers enforce limits on how long a url may be. You are also responsible to validate/sanitize incoming data, do not trust that it won't be tempered with. Same applies to localStorage data btw. Common cases include storing a search query: if you refresh the page you still have the search query.
Let the backend save the data and retrieve the user's data on page load.
I would like to know how can I stop component reusing in Vue-router.
I'm building a simple page application and I am unable to update data after clicking the same link twice.
Is it possible to somehow force reloading or what are the best practices in my situation?
Use the key attribute on router-view set to current url. It's built in, so no need to write any code.
<router-view :key="$route.fullPath"></router-view>
Vue Router reuses the same component therefore the mounted hook won't be called. As stated in the documentation:
The same component instance will be reused [...] the lifecycle hooks of the component will not be called.
If you want to update the data you have two options:
Watch the $route object
const User = {
template: '...',
watch: {
'$route' (to, from) {
// react to route changes...
}
}
}
Use the beforeRouteUpdate navigation guard
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
For a more detailed explanation you can check the section Reacting to Param Changes of the Vue Router documentation: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes.
One way to do this is to put a key on the router-view and append a timestamp querystring to your router-link
const Home = {
template: '<div>Home</div>',
created() {
console.log('This should log everytime you click home.');
},
};
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
]
});
new Vue({
router,
el: '#app',
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<router-link :to="`/?q=${Date.now()}`">/home</router-link>
<router-view :key="$route.fullPath"></router-view>
</div>
One reason not to do it this way is because it'll force rerenders on components that you may want to be reused such as on routes like
/posts/1
/posts/2
When using the vue-router with .vue files, there is no documented way to pass data from one view/component to another.
Let's take the following setup...
main.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
let routes = [
{
path: '/page1',
component: require('./views/Posts.vue')
},
{
path: '/page2',
component: require('./views/EditPost.vue')
}
];
let router = new VueRouter({
routes
});
new Vue({
el: '#main',
router
});
Posts.vue:
<template>
<div>
Posts.vue passing the ID to EditPost.vue: {{ postId }}
</div>
</template>
<script>
export default {
data() {
return {
allPostsHere: // Whatever...
}
}
}
</script>
EditPost.vue:
<template>
<div>
EditPost.vue received ID from Posts.vue: {{ receivedId }}
</div>
</template>
<script>
export default {
data() {
return {
receivedId: // This is where I need the ID from Posts.vue
}
}
}
</script>
Please note: It is not possible to receive the ID directly from the EditPost.vue, because it has to be selected from Posts.vue.
Question: How can I pass the ID from one view/component to the other?
A route can only be accessed via a URL and a URL has to be something user can type into the URL bar, therefore to pass a variable from one view component to another you have to use route params.
I assume you have a list of posts in Posts component and want to change page to edit a specific post in EditPost component.
The most basic setup would be to add a link in the post list to redirect to the edit page:
<div v-for="post in posts">
{{ post.title }}
<router-link :to="'/post/' + post.id + '/edit'">Edit</router-link>
</div>
Your routes would look like this:
[
{
path: '/posts',
component: require('./views/Posts.vue'),
},
{
path: '/post/:postId/edit',
component: require('./views/EditPost.vue'),
props: true,
},
]
The props configuration option is just to inform the Router to convert route params to component props. For more information see Passing props to route components.
Then in EditPost you'd accept the id and fetch the post from server.
export default {
props: ['postId'],
data() {
return {
post: null,
}
},
mounted() {
this.fetchPost();
},
methods: {
fetchPost() {
axios.get('/api/post/' + this.postId)
.then(response => this.post = response.data);
},
},
}
After the request has been completed, EditPost has its own copy which it can further process.
Note, that on every post edit and every time you enter the post list, you'll make a request to the server which in some cases may be unnecessary, because all needed information is already in the post list and doesn't change between requests. If you want to improve performance in such cases, I'd advise integrating Vuex into your app.
If you decide to do so, the components would look very similar, except instead of fetching the post to edit via an HTTP request, you'd retrieve it from the Vuex store. See Vuex documentation for more information.
if you don't want the params appear in the URL bar,you can use window.sessionStorage, window.localStorage or vuex.
Before you leave the view, set your parameters and get it after entering the new view.
You can use a prop on the <router-view :my-id="parentStoredId"></router-view> to pass down data present in the app.vue (main component). To change the parent data you need to emit a custom event comprising the value, from the childs (Posts.vue, EditPost.vue).
Another way is the Non Parent-Child Communication.
The way I prefer is Vuex. Even if it require you to learn the usage, it will repay back when the app grows.