We Keep Coding

How to update vue-meta on route/url change?

The meta data on my website is not updating when the route changes. The route itself has a watch on it which updates the view fine, but the metaInfo() from vue-meta is not keeping up. The <script> section of my code looks like this:
<script>
export default {
name: "Product",
watch: {
'$route.params.ProductID': {
deep: true,
immediate: true,
handler() {
this.getProduct(); // calls getProduct() on route change. Can I also call metaInfo() from here somehow?
}
}
},
metaInfo() {
return {
title: this.Product.ProductTitle,
meta: [
{
name: 'description', content: this.Product.ProductTitle
}
]
}
},
computed: {
Product() {
return this.$store.getters.getProduct
}
}, mounted() {
if (this.Product == null || !this.Product.length) {
this.getProduct();
}
}, methods: {
getProduct() {
return this.$store.dispatch('loadProduct', {ProductID: this.$route.params.ProductID})
}
}
}
</script>
What is happening is that when I change my route and go from /product/123 to /product/124, the metaInfo() still shows the meta data for /product/123. If I hit refresh, then the metaInfo() updates and shows the correct data for /product/124.
I need the watch to trigger an update of metaInfo() but don't know how to do it. I can't find this information in the docs anywhere. Please help?

For reactive, use variables outside return statements.
metaInfo() {
const title = this.Product.ProductTitle;
return {
title: title,
meta: [
{
name: 'description', content: title
}
]
}
}
https://vue-meta.nuxtjs.org/guide/caveats.html#reactive-variables-in-template-functions

How to access data of [object object] AngularJS

I am new to AngularJS.
I am sending a JsonObject to another state.
Ex:
viewScope.edit=function(d) {
var viewData = {
'name' : d.name,
};
$state.go('edit', {'viewD': viewData}, {reload: true});
};
My State is-
viewApp.config(function($stateProvider){
$stateProvider
.state('edit', {
name: '#/edit',
url: '/register/{viewD}',
templateUrl: function(){
return path+'/register.jsp';
},
controller:'registerCtrl',
resolve : {
loadPlugin: function($ocLazyLoad) {
return $ocLazyLoad.load([{
name : 'registerApp',
files: [path+'/resources/js/register.js'],
}])
}
}
})
});
In register Controller getting data-
regApp.controller('registerCtrl',function($stateParams){
if($stateParams != undefined){
console.log($stateParams.viewD);
}
});
On console output is- [object object]
How can i access the name key from this [object object].
console.log($StateParams.viewD.name); // Not Working
JSON.parse, JSON.stringify not working.

You have to change your state config URL from
url: '/register/{viewD}',
to
url: '/register/{viewD:json}',
The JSON parameter type has been added in version 0.2.13

Change your config method as following,
viewApp.config(function($stateProvider){
$stateProvider
.state('edit', {
name: '#/edit',
url: '/register',
params: {
viewD: null
}
templateUrl: function(){
return path+'/register.jsp';
},
controller:'registerCtrl',
resolve : {
loadPlugin: function($ocLazyLoad) {
return $ocLazyLoad.load([{
name : 'registerApp',
files: [path+'/resources/js/register.js'],
}])
}
}
})
});
And then you can access your object from $state like this in the controller,
$state.params.viewD or from $stateParams like this $stateParams.viewD
Now try console.log($state.params.viewD.name)

AngularJS UI-Router optional url segment in the middle

I want to have an optional url segment for the following example:
url: "/post/:category/:subcategory/:title/{id:int}",
In the above example subcategory is optional. For example it will accept:
url: "/post/sports/football/some-title/10",
and it will also accept:
url: "/post/sports/some-title/15",
which do not have subcategory. I can do that using to separate states but is there any rule for that?
Please note only subcategory segment is optional. Others are mandatory.

.state('post', {
url: '/post/:category/:subcategory/:title/:{id:int}',
templateUrl: 'views/post.html',
controller: 'postCtrl',
params: {
subcategory: { squash: true, value: null },
}
})
For more info read the doc

Solution is in detail described here
Angular js - route-ui add default parmeter
and here is how we can define such parameter:
.state('state', {
url: '/:category/{subcategory:(?:football|tennis|hokey)}/:title/:id',
abstract: true,
template: '<div ui-view=""></div>',
params: {subcategory : { squash : true, value: 'football' }}
})

Possible to hide some parameters in URL with Angular UI Router?

I want to pass two values to new ui-view via params:
item id
list of objects
However, I'd like the new view to show only the id in the browser URL and not the stringified array of objects:
http://www.myapp.com/#/my-view/4
INSTEAD OF
http://www.myapp.com/#/my-view/4?flskdjalfjaewoijoijasdlfkjösldakjföliwejöorijo
Is it possible to either a) pass the array of objects hidden to the ui-view or b) pass both but hide the other from the browser URL?
I found something about the squash parameter, but couldn't get it to do what I'm trying.
Here's my view:
$stateProvider
.state('show', {
url: "/show/{itemId}?{itemList}",
views: {
'mainView': {
templateUrl: 'views/itemView.html',
controller: 'showController',
params: {
itemList: {
value: null,
squash: true
},
itemId: -1
}
}
}
How can I hide the list of objects from the URL, without hiding the id?

You are on the right path. To hide params you have to define them in params as you do, without squash.
Your example should look like:
$stateProvider
.state('show', {
url: "/show?itemId",
views: {
'mainView': {
templateUrl: 'views/itemView.html',
controller: 'showController'
// params do not work here! They need to be attached below ...
// $stateProvider.state('show', {url:'/show/:url_param',views:{}, params: {}})
}
},
resolve: {},
params: {
itemList: {
value: null
}
}
})
See example: http://plnkr.co/edit/wEjwCVWMKTyuSdyLr0og?p=preview

It's also possible doing that
SomeController:
$state.go(someState, {
'itemId' : item._id,
'itemName' : item.title
});
SomeRoute
function someRoute($stateProvider) {
$stateProvider
.state('someState', {
url : '/:itemName',
params : {
'itemId' : null //hides itemId param
}
});
}
Output: .../itemnumber1

durandal.js navigation with parameters

i am not able to navigate from one view to another view with pararameter
from :-
ViewModel : App/Foldername/page1.js
View : App/Foldername/page1.html
i want to go with id parameter:
ViewModel : App/Foldername/page2.js
View : App/Foldername/page2.html
in page1.js i wrote following things,
self.goTopage2 = function (id) {
router.mapRoute('Foldername/page2/:id', 'viewmodels/Foldername/page2', 'This is page2view');
};
in shell.js
function boot() {
router.mapNav('home');
router.mapNav('details');
router.mapNav('Foldername/page2');
log('Hot Towel SPA Loaded!', null, true);
return router.activate('home');
}
please guid me correct way!

A common approach is to have a list of routes somewhere and load up that list. When you define a list such as below, you need to use router.map() to map the routes, as mapNav creates a default route without parameters. Example of an object containing routes -
var routes = [{
url: 'home',
moduleId: 'viewmodels/home',
name: 'Home',
visible: true,
settings: {}
}, {
url: 'events',
moduleId: 'viewmodels/events/events',
name: 'Events',
visible: true,
settings: {}
}, {
url: 'eventdetails/:id',
moduleId: 'viewmodels/events/eventdetails',
name: 'Event Details',
visible: false,
settings: { event: true, show: false }
}];
And how to map those routes -
router.map(routes);
And finally how to visit those routes -
router.activate('home');
or
var url = '#/fighterdetails/' + selectedFighter.id();
router.navigateTo(url);

(DurandalJS 1.2.0) I'm not totally sure if this is the best way, since I'm quite new to Durandal, but at least managed to make it work with this:
In main.js:
router.mapRoute('details/:id', 'viewmodels/details', 'Details', false);
In list.js:
loadDetails: function (id) {
router.navigateTo('#/details/' + id);
},