We Keep Coding

Vuejs passing arguments with a routes href link

I'm quite new to Vuejs, so Sorry in advance!
I have a component called "Goods" which shows all the items in a route path ("/Goods") and another component called "AddGoods" at ("/AddGoods") which is a form and submits data to my database table.
I have to use two separate pages for these two and they work closely together.
now I also want to be able to use my AddGoods form for editing and showing details on my already added Goods and I'm having trouble finding a way to send some parameter with the link so that I could manage my field and buttons based on each situation (like making fields readonly for showing details and so on).
here's my route.js :
{
path: "/addGoods",
name: "add goods",
meta: {
title: "Add Goods",
},
component: () => import("../views/GoodsManagment/AddGoods.vue"),
},
{
path: "/goodsTbl",
name: "goods tbl",
meta: {
title: "Goods Table",
},
component: () => import("../views/GoodsManagment/GoodsTbl.vue"),
},
and here's the link to "AddGoods" :
<v-btn v-on="click" href="/AddGoods"> Add a new item </v-btn>

So I ended up doing it like this :
route.js:
{
path: "/addGoods/:id",
name: "add goods",
meta: {
title: "Add Goods",
},
component: () => import("../views/GoodsManagment/AddGoods.vue"),
},
{
path: "/goodsTbl",
name: "goods tbl",
meta: {
title: "Goods Table",
},
component: () => import("../views/GoodsManagment/GoodsTbl.vue"),
},
and to call it , I personally found the Programmatic Navigation easier to use, so :
this.$router.push({name: "add goods", params: { id: 123 }});

Passing query parameter by using navigateByUrl()

I am trying to Navigate to a new page on click of an icon and below is the code
this.prj = e.data.project_number;
this.router.navigateByUrl('/dashboard/ProjectShipment/634');
Instead of this hardcoded query parameter 000634 I have to pass a this.prj in to it. My path is like below
const appRoutes: Routes = [
{
path: 'dB',
data: { title: 'Dashboard' },
children: [
{
path: 'ProjectShipment/:reportProject',
component: ProjectShipmentComponent,
data: { title: 'Project Shipment' },
}

You can use 'router.navigate' instead 'router.navigateByUrl':
this.router.navigate([URL],{ queryParams: { id: this.prj });

Simply use string interpolation
this.router.navigateByUrl(`/dashboard/ProjectShipment/${this.prj}`);

// Set our navigation extras object
// that passes on our global query params and fragment
let navigationExtras: NavigationExtras = {
queryParams: {...},
state: {...}
};
// Redirect the user
this.router.navigateByUrl(redirect, navigationExtras);
NavigationExtras docs
EDIT: https://stackoverflow.com/a/44865817/5011818 this is also worth to look at

this.router.navigate(['/route1'], { variable1: "Value" });
this.router.navigateByUrl('/route1', { variable1: "Value" });
Please none: if your url is urlencoded use navigateByUrl, if your url is not urlencoded use navigate

How to display different front-end router view at the same time using Vue

I have a page, there are three iframes in this page(I have to use iframe) and they will be displayed at the same time. In these iframes, I set specified the url comes from a SPA page. such as:
routes: [
{
path: '/',
name: 'air',
component: () => import('#/views/dashboard/index.vue'),
children: [
{
path: '/top',
name: 'airTop',
component: () => import('#/views/dashboard/top.vue')
},
{
path: '/left',
name: 'airLeft',
component: () => import('#/views/dashboard/left.vue')
},
{
path: '/right',
name: 'airRight',
component: () => import('#/views/dashboard/right.vue')
}
]
}
]
When I change some values in top iframe, I find the left one and the right one will not be changed. I realize that the different iframe will get a new Vue instance, so the value won't be shared.
My question: Is there any way can share the value in different iframe at the same time. Using sington?

vue - remove latest child path

so I currently have my router paths set up as such:
{
component: List,
name: "account-list",
path: "list/:id",
// alias: "list/:id/edit_item/:item_id",
children: [
{
path: "edit_item/:item_id",
},
{
path: "*",
redirect: "/account/list/:id"
}
]
}
And let's say we have a url like this: http://localhost:8080/#/account/list/5bb17bdec7fb946609ce8bd4/edit_item/5bbc2d12aded99b39c9eadb9
How would I turn this into:
http://localhost:8080/#/account/list/5bb17bdec7fb946609ce8bd4
I am currently using
this.$router.back()
Which generally works well, but if I were to have accessed another item by directly pasting in its url, this.$router.back() would just revisit the previous url.
So is there a surefire way to guarantee that I would remove the child path?

Vue router will maintain current params when navigating so you should be able to navigate to the named parent route.
For example
this.$router.push({ name: 'account-list' })
The current :id param will be re-used.
If you wanted to make it dynamic, you could work your way up the current route's matched array. For example, to go to the current route's named parent
this.$router.push({
name: this.$route.matched[this.$route.matched.length - 2].name
})
This will only work on nested routes of course as the matched length for top-level routes is only 1.
For non-named routes you must construct the full path with all params interpolated into the string. You could do it by getting the destination routes path property and substituting param tokens with those in this.$route.params but that's going to get messy. Eg
// get parent path property
let path = this.$route.matched[this.$route.matched.length - 2].path
let realPath = path.replace(/:\w+/g, param =>
this.$route.params[param.substr(1)])
this.$router.push(realPath)
This won't work if your paths use advanced pattern matching.

You can move your child route up one level, so that it is not a child anymore. That way the id would show up in the this.$router.params object.
[
{
path: 'list/:id',
component: List,
name: "account-list"
},
{
path: 'list/:id/edit_item/:itemid',
component: Form,
name: "account-form"
}
]
You can do a do a $router.replace to replace the current path.
const id = this.$router.params['id'];
this.$router.replace({
name: 'account-form',
params: { id }
})

Store your list id 5bb17bdec7fb946609ce8bd4 in localStorage and get that localStorage in route script file.And add it your redirect path. For ex:
var listId = localStorage.getItem('listId');
// routh obj
{
component: List,
name: "account-list",
path: "list/:id",
// alias: "list/:id/edit_item/:item_id",
children: [
{
path: "edit_item/:item_id",
},
{
path: "*",
redirect: "/account/list/" + listId
}
]
}

get the list's id first before replacing the route.
let currentId = this.$route.params.id
this.$router.replace({
name: 'list',
params: { id: currentId }
})
also, it would be better if you name your sub routes.

Bind data to component with Vuex

I'm new to vue.js and I'm trying to use vuex. Here is my issue:
I have a list of articles (which is a component) linked with a store with v-for="article in articles and a computed property:
computed: {
articles() {
return this.$store.state.articles
}
}
So here is the data in my store:
state: {
articles: [{
title: "Article 1",
id: 1,
description: "Article 1",
}, {
title: "Article 2",
id: 2,
description: "Article 2",
}
}]
}
When I click on an article, I want it to redirect to the article page template (which is a component) with <router-link :to="{path: '/article/'+article.id}"></router-link>.
What I'm trying to do is bind the data of the correct article in the articlePage template.
The issue is that if I apply the same computed property to my articlePage.vue component with a v-for, I will display all of the article on the same page. I would like to display only the matching id component.
How can I do that?
Thank you for your time :)

From your comments I understand that you use vue-router module
So in your routes.js (or structure ) your must have something like this
const router = new VueRouter({
routes: [
{ path: '/articles', component: articlesPage },
{ path: '/article/:id', component: articlePage }
]
})
Then in your articlePage component you can extract ":id" like this:
this.$route.params.id
because vue-router gives you access to the object $route with methods and properties
Check more here https://router.vuejs.org/guide/essentials/dynamic-matching.html
then you can use it to search the articles array and find the data and present them
e.x.
computed:{
selectedArticle(){
var article_id = this.$route.params.id;
var articles = this.$store.state.articles;
var article = null;
for(var a=0;a<articles.length;a++){
if(articles[a].id == article_id ){
article = articles[a];
break;
}
}
return article;
}
}