I have 2 views A and B, that are loaded in the routes "routeA" and "routeB".
In the view A I'm loading a video.
When I click on the button that exists in the view A that executes $router.push({ name: 'routeB'}), it loads the view B, but I can still listen to the video audio, meaning the DOM did not clean whatever was loading on the previous view.
The way I load the routes is like below:
const routeA = () => import('./components/A.vue');
const routeB = () => import('./components/B.vue');
export default [
{
path: '/routeA',
name: 'routeA',
component: routeA,
},
{
path: '/routeB',
name: 'routeB',
component: routeB,
},
];
Code I use to load the video:
let url = window.URL || window.webkitURL;
var vid = document.getElementById("my_video_player");
vm.video.profile_video_src = url.createObjectURL(xhr.response)+'#t=1';
vid.load();
Is it related to the memory leak that is explained here: https://v2.vuejs.org/v2/cookbook/avoiding-memory-leaks.html?
Is there any chance that I can clean the DOM after moving to another view? Or at least ensure that things like videos don't keep loading / playing?
Related
I'm migrating an old project from vue-cli to vite. I followed the migration guide and everything worked great, but there's something it's not working, or at least, not as intended, when I was using vue-cli I tried to implement the loading states as shown in their documentation but then I saw the following pull request explaining how to achieve the wanted behavior (with the downside of losing navigation guards on those routes).
Now, after migrating I noticed that neither the loading/error components are rendered at all, even setting a timeout really small, however, I see in the networking tab that my components are being loaded, but never rendered.
Do you have any suggestions of why might this occur?.
// This is the lazyLoadView that was working before migrating to vite.
function lazyLoadView(AsyncView) {
const AsyncHandler = () => ({
component: AsyncView,
// A component to use while the component is loading.
loading: import("./components/loaders/loader.vue").default,
// A fallback component in case the timeout is exceeded
// when loading the component.
error: import("./components/loaders/error.vue").default,
// Delay before showing the loading component.
// Default: 200 (milliseconds).
delay: 1,
// Time before giving up trying to load the component.
// Default: Infinity (milliseconds).
timeout: 2,
});
return Promise.resolve({
functional: true,
render(h, { data, children }) {
// Transparently pass any props or children
// to the view component.
return h(AsyncHandler, data, children);
},
});
}
And the routes I have:
const routes = [
{
path: "/foo/",
component: () => lazyLoadView(import("./components/bar.vue")),
}
]
Let me know if you find why might this be happening.
So I figured out:
Looks like the loading & error components were also lazy loaded, they were skipped. So continued trying to obtain the main one until shown (that's why didn't render the loading besides of only showing a message).
So in order to fix it I had to import them at the top and include them in the lazyLoadView like this:
//These two imports at the top
import loaderComp from "./components/loaders/loader.vue";
import errorComp from "./components/loaders/error.vue";
function lazyLoadView(AsyncView) {
const AsyncHandler = () => ({
component: AsyncView,
// A component to use while the component is loading.
// must NOT be lazy-loaded
loading: loaderComp,
// A fallback component in case the timeout is exceeded
// when loading the component.
// must NOT be lazy-loaded
error: errorComp,
// Delay before showing the loading component.
// Default: 200 (milliseconds).
delay: 1,
// Time before giving up trying to load the component.
// Default: Infinity (milliseconds).
timeout: 2,
});
return Promise.resolve({
functional: true,
render(h, { data, children }) {
// Transparently pass any props or children
// to the view component.
return h(AsyncHandler, data, children);
},
});
}
Versions:
vueJS: 3.0.0
vuex: 4.0.2
Chrome: Version 94.0.4606.61 (Official Build) (x86_64)
One advantage of SPA frameworks like vueJS is that they offer some efficiencies in network consumption (ie, fewer server hits by delivering UI/UX assets to client in bulk, and hopefully minimizing server requests). But I'm running into a scenario where just the opposite happens: ie, I am required to revisit the server in order to navigate between vueJS components/views. This seems highly contradictory to the SPA ethos, and I'm suspicious something simple must be wrong in my setup. Details follow.
router/index.js:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '#/views/Home.vue'
import Car from '#/views/Car.vue'
import Bike from '#/views/Bike.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
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(/* webpackChunkName: "about" */ '#/views/About.vue')
},
{
path: '/cars/new',
name: 'New Car',
component: Car
},
{
path: '/cars/:id',
name: 'Edit Car',
component: Car,
props: true
},
{
path: '/bikes/new',
name: 'New Bike',
component: Bike
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Then in Car.vue component, I have a form-submit handler something like this:
handleSubmit(event) {
let form = event.target;
if (form.checkValidity()) {
// Add or update Car.
window.location.href = window.location.origin + process.env['BASE_URL'];
}
this.wasValidated = true
Rather than using window.location.href, I tried to use:
this.$router.push('Home');
But that had no effect. That is, the URL in the browser address bar began as something like http://localhost:8080/myapp/, and remained that way after the router-push.
I also tried pushing to other routes, like About; in that case, the browser address bar properly toggled to http://localhost:8080/myapp/about, but the page content remained the same!
Clearly, this cannot be the right behavior.
Can you suggest how to fix this?
this.$router.push('Home') tries to push 'Home' as a path, but there's no matching path in your router config, nor is there a fallback route (for 404s), so the route simply doesn't change.
If you meant to push the route by name, the $router.push() argument needs to be an object:
this.$router.push({ name: 'Home' })
If you prefer to use a path, the path of Home is actually /:
this.$router.push('/')
I have a bit of a specific usecase here. I have a large Vue app with lots of pages. Each page has a page-id to identify it on the server and load it's content. These ids are in the router path (parent-id/child-id/another-child-page-id). On the page components themselves I display a page title. Unfortunately, there is no correlation between the translation key of the page title to the page-id.
Now, instead of creating a mapping between page-ids and page title translations that I will have to maintain by hand, I figured I could lookup the route in the router config and require the component:
{
path: 'the-page',
name: 'ThePage',
component: resolve => require.ensure([], () => resolve(require('#/pages/ParentPage/ChildPage/ThePage')), 'parent-page')
}
This works by recursively walking through the routes to find the page-id, then loading the component in a promise:
// find the route definition
const route = findRouteByPath(file.areaName)
// load the route component
new Promise(resolve => { route.component(resolve) })
.then(component => {
console.log(component)
})
This gives me the component like so:
Object {
mixins: Array(1),
staticRenderFns: Array(0), __file: "/the/file/path.vue",
beforeCreate: Array(1),
beforeDestroy: Array(1),
components: Object,
mixins: Array(1),
render: function (),
// etc.
}
If I call the render function, I get an error:
Uncaught (in promise) TypeError: Cannot read property '_c' of undefined
What I want to do is programmatically render the component and grab the content of the slot page-title from the component.
Can anyone help with this?
Update 1
Vue.extend() then mounting seems to do what I want. The problem is, I get all kinds of errors because the pages depend on certain things being around, like the current route. I'm also a bit worried to trigger certain created() hooks that would trigger API calls and such. My current state is trying to get rid of mixins and hooks like so:
const strippedComponent = Object.assign(component, {
mixins: [],
components: {},
beforeCreate: []
})
const Constructor = Vue.extend(strippedComponent)
const vm = new Constructor({})
But I'm not quite there yet.
Update 2
I ended up abandoning this and bit the bullet by adding a meta: {} object to each route where I store things like the page title translation key and other good stuff.
I would love to a #signin route that would open a dialog on top of whatever page there was before.
Let's consider this example app this the following routes:
router.map([
{route: '', moduleId: 'vm/home', title: "Home"},
{route: 'about', moduleId: 'vm/about', title: "About"},
{route: 'signin', moduleId: 'vm/signin', title: 'Sign In'}
]);
Here are example use cases:
User is on # and navigates to #signin: we should see a Sign In dialog on top of Home page
User is on #about and navigates to #signin: we should see a Sign In dialog on top of About page
User navigates to http://localhost:9000/#signin: we should see a Sign In dialog on top of Home page
User is on #signin and closes dialog: we should see a page that was behind the dialog (there's always a page behind).
The dialog and router are both plugins and have no interactions between eachother.
Also having the router display dialog would ignore how the router works - it has a div which it dumps content into. Dialogs exist outside of all of this.
However if you wanted to (I may do this aswell), you could try this.
Add dialog: true to the route map.
Override router.loadUrl method. Check if the route is a dialog route as we marked before, and activate the dialog instead.
I would make the dialog a child route, so then you can know which view to display beneath the dialog. Otherwise you could just have to show the dialog over anything and ignore routing entirely.
Edit: I don't think this would entirely work actually. loadUrl returns a boolean. You could open the dialog and return false to cancel navigation.
Edit2:
My Attempt
The loadUrl method loops through all routes, and each has a callback, so ideally we need to insert our logic into this array.
for (var i = 0; i < handlers.length; i++) {
var current = handlers[i];
if (current.routePattern.test(coreFragment)) {
current.callback(coreFragment, queryString);
return true;
}
}
This array is added to using the routers route method. Durandal calls this method when you map routes, so ideally we could add some extra parameters to the route config and let Durandal handle these. However the configureRoute function is internal to the routing module, so we will need to edit that and make sure we copy changes over when updating Durandal in the future.
I created a new list of dialog routes:
{ route: 'taxcode/add(/:params)', moduleId: 'admin/taxcode/add', title: 'Add Tax Code', hash: '#taxcode/add', nav: false, dialog: true, owner: '#taxcodes' },
{ route: 'taxcode/edit/:id', moduleId: 'admin/taxcode/edit', title: 'Edit Tax Code', hash: '#taxcode/edit', nav: false, dialog: true, owner: '#taxcodes' }
The idea of an owner, is that if there is a case where the initial route is this, we need something behind the dialog.
Now replaced the router.route call in configureRoute with this:
router.route(config.routePattern, function (fragment, queryString) {
if (config.dialog) {
if (!router.activeInstruction()) {
// No current instruction, so load one to sit in the background (and go back to)
var loadBackDrop = function (hash) {
var backDropConfig = ko.utils.arrayFirst(router.routes, function (r) {
return r.hash == hash;
});
if (!backDropConfig) {
return false;
}
history.navigate(backDropConfig.hash, { trigger: false, replace: true });
history.navigate(fragment, { trigger: false, replace: false });
queueInstruction({
fragment: backDropConfig.hash,
queryString: "",
config: backDropConfig,
params: [],
queryParams: {}
});
return true;
};
if (typeof config.owner == 'string') {
if (!loadBackDrop(config.owner)) {
delete config.owner;
}
}
if (typeof config.owner != 'string') {
if (!loadBackDrop("")) {
router.navigate("");
return; // failed
}
}
}
var navigatingAway = false;
var subscription = router.activeInstruction.subscribe(function (newValue) {
subscription.dispose();
navigatingAway = true;
system.acquire(config.moduleId).then(function (dialogInstance) {
dialog.close(dialogInstance);
});
})
// Have a route. Go back to it after dialog
var paramInfo = createParams(config.routePattern, fragment, queryString);
paramInfo.params.unshift(config.moduleId);
dialog.show.apply(dialog, paramInfo.params)
.always(function () {
if (!navigatingAway) {
router.navigateBack();
}
});
} else {
var paramInfo = createParams(config.routePattern, fragment, queryString);
queueInstruction({
fragment: fragment,
queryString: queryString,
config: config,
params: paramInfo.params,
queryParams: paramInfo.queryParams
});
}
});
Make sure you import dialog into the module.
Well maybe all of that is not needed when using a trick with the activation data of your home viewmodel.
Take a look at my Github repo I created as an answer.
The idea is that the route accepts an optional activation data, which the activate method of your Home VM may check and accordingly show the desired modal.
The benefit this way is that you don't need to touch the existing Durandal plugins or core code at all.
I'm though not sure if this fully complies with your request since the requirements didn't specify anything detailed.
UPDATE:
Ok I've updated the repo now to work with the additional requirement of generalization. Essentially now we leverage the Pub/Sub mechanism of Durandal inside the shell, or place it wherever else you want. In there we listen for the router nav-complete event. When this happens inspect the instruction set and search for a given keyword. If so then fire the modal. By using the navigation-complete event we ensure additionally that the main VM is properly and fully loaded.
For those hacks where you want to navigate to #signin, just reroute them manually to wherever you want.
Expanding on my suggestion in the comments, maybe something like this would work. Simply configure an event hook on router:route:activating or one of the other similar events and intercept the activation of /#signin. Then use this hook as a way to display the dialog. Note that this example is for illustrative purposes. I am unable to provide a working example while I'm at work. :/ I can complete it when I get home, but at least this gives you an idea.
router.on('router:route:activating').then(function (instance, instruction) {
// TODO: Inspect the instruction for the sign in route, then show the sign in
// dialog and cancel route navigation.
});
I need to navigate to another view from a event handler in my code, I do it like this
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router', 'underscore'],
function (system, app, viewLocator, router, _) {
system.log('starting app');
//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");
app.title = 'Destiny';
app.configurePlugins({
router: true,
dialog: true,
widget: true,
observable: true
});
router.map('destination', 'viewmodels/destination');
router.activate();
_.delay(function() {
app.start().then(function() {
//Replace 'viewmodels' in the moduleId with 'views' to locate the view.
//Look for partial views in a 'views' folder in the root.
viewLocator.useConvention();
//Show the app by setting the root view model for our application with a transition.
app.setRoot('viewmodels/locationPicker', 'flip');
});
}, 1500);
}
);
Here I define a mapping between my moudle and the router - destination and set root view as another view locationPicker
in my another view locationPicker.js, I navigate to it like this
router.navigate('destination');
from the developer tool, I see that my view model destination.js file is loaded without error, but the view does not change at all. Why is this happening? BTW, I am using the durandal 2.0.1 version
The router plugin is initialized in the call to app.start. Therefore, you're configuring the plugin before initialization, and the configuration isn't being registered. Also, I'm not familiar with your syntax for registering the route. The more standard way is to pass in a list of objects with a route pattern and module id. Please try the following:
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router'],
function (system, app, viewLocator, router) {
system.log('starting app');
//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");
app.title = 'Destiny';
app.configurePlugins({
router: true,
dialog: true,
widget: true,
observable: true
});
app.start().then(function() {
router.map([
{ route: 'destination', moduleId: 'viewmodels/destination' }
]).activate();
//Replace 'viewmodels' in the moduleId with 'views' to locate the view.
//Look for partial views in a 'views' folder in the root.
viewLocator.useConvention();
//Show the app by setting the root view model for our application with a transition.
app.setRoot('viewmodels/locationPicker', 'flip');
});
}