I have
<router-link
:to="{ name: 'painting', params: { id: parseInt(this.id) + 1 } }"
>Next</router-link
>
I thought I could go to the same path + 1.
The URL changes to + 1 (at first click only). But the page won't reload.
If I check on the second time, the href is still the same ID, it doesn't add 1. I imagine is because it won´t reload.
Here´s my router specs:
{ path: "/painting/:id?", name: "painting", component: Painting }
Now I´ve tried:
<router-link
:to="{
name: 'painting',
params: { id: Number(this.$route.params.id) + 1 },
}"
>Next</router-link
>
And the URL changes, but the doesn´t.
Used
<router-view :key="$route.fullPath"></router-view>
Related
I am facing this issue with navigation. Whenever I switch the tabs, the route with "" keeps being active all the time no matter what. I tried using router-exact css, but whenever I go in nested route then the menu nav stops having active class. I believe this is because the path is ""
Router:
{
path: "",
name: "Item1",
component: Item
}
Component
<router-link :to="{ name: 'Item1' }" >Item1</router-link>
<router-link :to="{ name: 'Item2' }" >Item2</router-link>
<router-link :to="{ name: 'Item3' }" >Item3</router-link>
The lighter color is active class
How it looks
Set path to '/' and add exact or exact-path to links: <router-link exact :to="{...}">
Here is the official documentation: https://router.vuejs.org/api/#exact
I have the main <RouterView/> which is responsible for the main navigation of the site. Now, one of the routes has its children as well. So in this component I've created another <RouterView name="helper"/> - a named one. Inside the router it looks like this:
{
path: '/foo/:bar',
name: 'foo',
meta: { requiresAuth: true, title: 'Foo' },
component: FooView,
children: [{
path: '1',
name: 'foo-first',
components: {
'helper': FooFirst,
},
}, {
path: '2',
name: 'foo-second',
components: {
'helper': FooSecond,
},
}],
props: true,
}
Now, the problem is with the RouterLinks inside the component - they are not getting the active class on load, only if I click on them - after this they start behave properly. The code is the following
...
<nav>
<RouterLink
:to="{ name: 'foo-first', params: { bar: data.bar } }"
class="px-1 py-4 text-base sm:text-sm"
active-class="!text-red-600 !border-red-500"
>
Foo First
</RouterLink>
<RouterLink
:to="{ name: 'foo-second', params: { bar: data.bar } }"
class="px-1 py-4 text-base sm:text-sm"
active-class="!text-red-600 !border-red-500"
>
Foo Second
</RouterLink>
</nav>
...
What I'm trying to do - make the links become active on load as well, for instance, if I go to some.site/foo/bar/1, I want the first RouterLink to become active on load.
It turned out that inside the RouterLink to attribute you don't need to pass any params as they are already in the parent route. Once I got rid of them, it started working properly.
I'm trying to develop a simple website using vue js and so far it goes well but I'm facing the following Issue:
I'm using a router to change pages, it works, but what I need to do is: Change Page & scroll to a specific anchor.
What I tried already:
Works well:
Route to contact page or home
<router-link to="/contact">Contact</router-link>
<router-link to="/">Home</router-link>
Doesn't work:
<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>
The last one works only if I'm on the home page, but whenever I change to Contact Page and try to route to "/#technology" it won't work. It does try routing to "http://example.com/contact/#technology" instead of "http://example.com/#technology".
If I do it like that, it will just scroll to top, but not to the anchor:
<router-link to="/#technology" Technology</router-link>
My Router Code:
const routes = [
{ path: '/', component: Home },
{ path: '/contact', component: Contact }
]
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (to.hash) {
return { selector: to.hash };
}
return { x: 0, y: 0 }
},
});
new Vue({
router,
}).$mount('#app');
And the templates look like this ( I did remove the unnecessary code):
<template id="home">
<div>
Home
<div id="technology"> <!-- IT SHOULD SCROLL TO HERE -->
</div>
</template>
<template id="contact">
<div>
Contact Page
</div>
</template>
i think you are on the right path.
but maybe you have mistaken the usage of Route name and path.
instead of
<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>
try using path instead of name
<router-link :to="{ path: '/', hash: '#technology' }" >Technology</router-link>
This is my router structure
{
path: '/',
name: 'home',
component: Home
},
{
path: '/user/:id',
name: 'user',
component: User,
children: [
{
path: '',
name: 'page',
component: Page
},
.....
}
I used this in Home.vue to redirect (/user/12345)
<router-link
:to="{
name: 'user',
params: {id: user.userId}
}"
>
When I clicked this link in home page, it routes correct path however I can not render child component (Page.vue) However when I reload the page, child component is loaded successfully. (url is still same)
There is an only rendering issue when I click the link on the homepage. How can I get rid of this. Thanks in advance.
User.vue
<template>
<div>
<NavDrawer/>
<router-view></router-view>
</div>
</template>
Edit: Any help will be so beneficial for me. Thanks
I am trying to build a spa using vuejs in which I have a list of users now when I click a user it should route to a new page with user details of the particular user how to params the user id in router-link
You can pass params in router link using
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
Here "name" key parameter defines the name of the route and "params" key defines the parameters you need to send with that route.
If you need to use Route Path instead of Route name, You can use.
<router-link :to="{ path: 'home', params: { userId: 123 }}">Home</router-link>
Reference
Looks like params: {...} doesn't work on non-named routes so to get that working I had to make my links like this:
<router-link :to="'/view-customer/' + customer.ID">
With ES6 template literals:
<router-link :to="`/books/${book.id}`"></router-link>
solution for non-named routes:
<router-link :to="{ path: 'register', query: { plan: 'private' }}"
>Register</router-link>
resulting in /register?plan=private
source: Documentation
I'm using this and it's works fine:
<router-link :to="'/home?id=' + customer.ID">
Also use the following code to retrieve it:
this.$route.query.id
router/index.js:
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Item from '../views/Item.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'List',
component: List
},
{
path: '/item/:id',
name: 'Item',
component: Item
}
}
]
List.vue:
<router-link :to="{ name: 'Item', params: { id: data.item.id }}">{{ data.item.id }}</router-link>
Item.vue:
<template>
id: {{ $route.params.id }}
</template>
<script>
return this.$route.params.id
</script>
Routes declaration
{path: '/insta-view/:name', name: 'instaFrontView', component: instaFrontViewComponent},
Bind parameter using the path
<router-link :to="'insta-view/'+ loginUserName" class="nav-link"> View</router-link>
Bind parameter using the name
<router-link :to="{ name: 'instaFrontView', params: { name: loginUserName }}" class="nav-link"> View</router-link>
export default {
data() {
return {
loginUserName: 'test',
}
},
}
Retrieve parameter in code
this.$route.params.name