I have two v-link like this :
'/accountList?accountType=1': {
name: 'accountList1',
component: require('./../views/finance/accountList.vue')
},
'/accountList?accountType=2': {
name: 'accountList2',
component: require('./../views/finance/accountList.vue')
},
<li><a v-link=" { name: 'accountList1', exact: true } "><span>test1</span></a></li>
<li><a v-link=" { name: 'accountList2', exact: true } "><span>test2</span></a></li>
when i click one or them , both are added linkActiveClass .
Now,my problem is: how to controller the active status by routerName or path AND query?
Ps: exact: true, this is a wrong example,it is not fit here.
In this case I see two solutions
along with routerName you also need to compare query params which can be accessed by: this.$route.query. accountType
You can compare $route.fullPath which includes URL including query and hash.
But I am not sure why you have these two routes different: ideally these should be ideally same route with different query Param. Also have a look at this answer.
Per docs: https://router.vuejs.org/en/api/router-link.html
I would suggest to use:
<!-- with query, resulting in /register?plan=private -->
<router-link :to="{ path: 'accountType', query: { accountType: '1' }}"></router-link>
<router-link :to="{ path: 'accountType', query: { accountType: '2' }}"></router-link>
Related
this is my json object ,i'm trying to access jackets in my url
{
"_id": "6316f215fd9c107baa1bc160"
"type": "Jackets",
}
this is my router component to get product by id
{
path: "/product/:id",
},
if i want to get my product information by id
<router-link :to="`/product/${product._id}`">
<div
class="bg-image hover-zoom ripple"
data-mdb-ripple-color="light"
>
<img
src="../../assets/pexels-baskin-creative-studios-1766838.jpg"
class="card-img-top"
/>
</div>
</router-link>
this is my url
http://localhost:8082/product/6316f215fd9c107baa1bc160
i get jackets in my template after clicking the router-link
{{product.type}}
how can i get add jackets in my url to something like this
http://localhost:8082/product/jackets
and still display the json details in my template component
As per my understanding, You want to slightly change the current route path without refreshing/reloading the page. If Yes, You can achieve that by using history.replaceState() API.
history.replaceState({}, '', this.$route.path + '/' + <your product name>)
I'm quite new to Vue and Nuxt and I built a web app. I need to show url based on city, but don't know what kind of routing is this.
I have web app under domain mydomain.com and there are pages like:
/ - for home page (mydomain.com)
/list - for list of items (mydomain.com/list)
/list/123 - item page, where 123 is id of item (mydomain.com/list/123)
What I want it is to get user's location and write it to vuex store and show urls with city prefix always, so it will look like:
/paris/ - for home page (mydomain.com/paris)
/paris/list - for list of items (mydomain.com/paris/list)
/paris/list/123 - item page, where 123 is id of item (mydomain.com/paris/list/123)
User will be able to change city using dropdown. I'm using nuxt and all url parts are used from pages, but in this case city is not the page it is kind of param. Please advice where to look.
It's achievable using vue-router. You can setup paths there like:
{
path: '/:city',
name: 'City',
component: City
},
{
path: '/:city/list',
name: 'List',
component: ListCmp
},
{
path: '/:city/list/:id',
name: 'ItemPage',
component: ItemPageCmp
},
Your template link for the ListCmp would be:
<router-link :to="{name: 'List', params: {city: 'Paris'}}">Paris</router-link>
And in your component you would access your param:
this.$route.params.city
I have a route path that looks like this /courses/:id/modules/:id, I am passing the :id of the course and modules via params like this
<router-link
:to="{
name: 'course-modules',
params: { id: item.id, onlineClassId: item.online_class_id }
}"
class="forum__link">
{{ item.title }}
</router-link>
I need to use the IDs to make a GET request.
But when I refresh the page, the component loses hold of onlineClassId which throws an error. Is there a way I persist that ID?
Thanks.
I figured the issue, in router.js I was using /courses/:id/modules/:id instead of courses/:onlineClassId/modules/:id
I have a page that uses dynamic routing.
I have a "jobs" page that lists all jobs. One you click one job, it gives you the detail of that one job.
Jobs HTML page uses the following (snippets excludes ul/li tags):
<vue-panel v-for="job in jobs" v-if="filterJob(job)" v-bind:key="job.id">
Job: {{job.title}}<br>
Description: {{job.description}}<br>
Salary: ${{job.salary}}<br>
Date Posted: {{job.datePosted}}<br>
<router-link :to="`/job/${job.id}`">Learn More</router-link>
Clicking learn more leads to the correct job page. But how do I dynamically show just that specific job?
In the Job page, within the script I have:
created() {
console.log(this.$route.params.id); // prints value of :id
},
Via console log I see that it has access to the correct job page. But it is not dynamically showing that one job on the page. What needs to be in the HTML to access a specific job?
HTML of job page, as of now (excludes the ul/li tags):
<vue-panel v-bind:key="job.id">
Job: {{job.title}}<br>
Description: {{job.description}}<br>
Salary: ${{job.salary}}<br>
Date Posted: {{job.datePosted}}<br>
I built a similiar project and did the following.
router.js:
{
path: '/jobs/:id',
name: 'JobSingle',
component: JobSingle
}
jobs.vue
<router-link :to="{name:'JobSingle', params:{id:job._id}}">
{{ job.title }}
</router-link>
For more question you can have a look at my project here: github.com/markusdanek/t2w-vue
If you want to access by HTML you have to not bind key.
mounted(){
document.getElementById("H1").setAttribute("key", this.$route.params.id);
console.log('alex : ',document.getElementById("H1"));
}
When you use it by vue, you can't do by v-bind as type:
This works:
<div :type="$route.params.id">Verticals Statistics</div>
This don't work:
<div :key="$route.params.id">Verticals Statistics</div>
So you'll have to trick for passing a :key by vue, or as you did, with :
<div v-for='id in [$route.params.id]' :key="id">Verticals Statistics</div>
But it will not apear in HTML code.
You have to put an id on each and create the key attribute in the mounted part.
In my Vue app, I can click a link generated by <router-link>...</router-link> and visit a page like: /site/books/00666.html.
The routing config for this is:
{
path: '/books/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
So I changed the URI in the browser (Fx57) to: /site/books/00777.html to try to display the detail information of another book. It failed with this:
Cannot get /books/00777.html
and the debugger told me something like:
Content security policy is preventing from accessing a resource from 'self'`.
I searched on CSP but can't figure out how to make this working.
Update: To reproduce the issue, I use vue init webpack test and scafolded a blank Vue app with router support.
One new router is added:
{
path: '/book/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
In the default HelloWorld.vue, just add a few lines with <router-link>:
<ul>
<li><router-link :to="{name: 'BookDetail', params: {id: 12345} }">Book 1</router-link></li>
<li><router-link :to="{name: 'BookDetail', params: {id: 23456} }">Book 2</router-link></li>
</ul>
In the HelloWorld page, clicking the link above will take you to "localhost:8080/book/12345.html". Good.
Change the URI to "localhost:8080/book/23456.html". The browser prompts the same error as before.
Update 2： per hint below, I modified the URI pattern to '/books/:id' and it is working.
Further question: What shall I do if I want to add the .html suffix?