I have two routes, say posts & pages, inside each user route, like
/user/foo/pages, user/foo/posts, /user/bar/pages, user/bar/posts
where foo and bar are the dynamic content. However nested routing in vue does not including those foo and bar
router.js
export default new Router({
routes: [
{
path: '/user/:id',
name: 'user',
component: User,
children: [
{path: 'posts', name: 'posts', component: Posts},
{path: 'pages', name: 'pages', component: Pages},
]
}
]
})
User.vue
<router-link to="posts">Posts</router-link>
<router-link to="pages">Pages</router-link>
The result vue is producing when i am already inside foo or bar, is
Posts
Pages
However the expected result should be (when i am inside foo)
Posts
Pages
Try to use object with name and params in your router-link, like this
<router-link :to="{name: 'posts', params: {id: $route.params.id}}">Posts</router-link>
i read vue-router souce code then see that they pop last item out of stack.
enter image description here
https://github.com/vuejs/vue-router/blob/11e779ac94eb226e4f52677003ff8d80e5648885/dist/vue-router.common.js#L447
it works as you expected when you add trailing slash into parent path
path: '/user/:id' -> path: '/user/:id/'
Related
I´ve implemented tabs with vue-router. When the user clicks back and forth within those tabs, but then likes to go to the previous page, he needs to press "back" multiple times to backplay each tab visit first.
Is it possible to exclude routes from the history in vue-router like:
let router = new VueRouter({
mode: 'history',
routes: [
.
.
.
{
path: '/tabs/',
name: 'tabs',
component: TabPage
children: [
{
path: 'tab1',
name: 'tab1',
component: Tab1Page,
excludeFromHistory: true
},
{
path: 'tab2',
name: 'tab2',
component: Tab2Page
excludeFromHistory: true
},
]
}
]
});
Onclick on a tab:
Instead of pushing a route to the route history, replace the
existing top of the route history.
<div #click="$router.replace('/tabs/tab1')"> Tab 1 </div>
In case you are using the router-link tag
<router-link to="/tabs/tab1" replace> Tab 1 </router-link>
Ìm new to vue.js and I#m practicing routing right now.
My router.js looks like this:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
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: '/myView',
name: 'myView',
component: () => import('./views/myView.vue')
}
]
})
Now I thought the name option referred to the name I've given the "component".
For example, I tried out the following with "myView" view:
<template>
<div>
<myWorld placeholder="tester"/>
</div>
</template>
<script>
import myWorld from '#/components/myWorld.vue'
export default {
name: 'sklfdjns',
components: {
myWorld
}
}
</script>
As you can see, the name is just gibberish. If the name option in the router really referenced this name in the component, Id expect it to fail.
But it doesnt. Everything works just fine.
Then I tried out changing the name in the router option, but nothing changed as well.
So what does this name option actually do?
Unfortunately, the official Documentation wasnt helpful for me either..
https://router.vuejs.org/guide/essentials/named-routes.html
As mentioned in docs router names are different than component names
purpose of named routes is to navigate without giving full URL i.e just by giving name and it's not reference to component name it's just name of your route
router.push({ name: 'user', params: { userId: 123 }})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
both will navigate to user route which is '/user/:userId'
As stated in the docs you posted, the name can be added for convenience. This can be helpful for longer paths or for iterating your routes into a menu for example.
To call such a route you then can use the name instead:
<router-link :to="{ name: 'home' }">home</router-link>
Another convenience example where i used the names before is iterating it into a menu with $route.name, you want readable names there.
Adding to Answer 1... the name mostly used when you want to push users from one page to another after something has happened
this.$router.push({name:'details'})
if the details name does not exist, you get an error
and also when you are also specific to a particular route, according to the first answer
the name in the component specifics name of that component.
This is useful in vue devtool for debugging, or when you want to render a component recursively, you have to set a name for the component. For example, you want to render component comment inside the template of a comment (to display sub-comment).
The name in router is name of that route.
For example:
you have a route like this
{
path: '/',
component: Home
},
when you want to go to the root page, you do some thing like this, right?
this.$router.push('/')
What if I want to change the root path to /admin?
I will have to find all this code this.$router.push('/') and replace the path? No way!
Instead, I will specific a route name name: 'root', and navigate through routes by name.
{
path: '/',
name: 'root',
component: Home
}
this.$router.push({ name: 'root' });
Once I want to change the route path, I just change the path in router.js
The name in component property and the one from route has no relation.
I've got little problem with dynamic router link. I got array of objects(pages) from API, and one of them is my home:
{
name:"dynamic"
parent_id:0
partners:null
slug:"/"
}
then using v-for I want create router-link like this:
<div v-for="page in pages">
<router-link
:to="{ name: page.name, params: { slug: page.slug }}"
class="v-list__link"
>
</div>
Problem is when I render page this link to home is not <a href="/"> as I expected but it is with endocing reference: %2F => <a href="%2F">
router.js
export default new Router({
scrollBehavior (to, from) {
return { x: 0, y: 0 }
},
mode: 'history',
routes: [
{
path: '/:slug',
name: 'dynamic',
component: Dynamic
},
{
path: '/',
name: 'dynamic',
component: Dynamic
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
})
does anyone know how to solve it ?
The route's path is /:slug. When resolved with slug equal to / then you get // as the final path, except it will be resolved to /%2F since the params will be encoded with encodeURIComponent.
Remove the leading slash from the slug param:
page.slug.replace(/^\//, '')
You also have two routes with the same name, this isn't allowed. The second dynamic route cannot be resolved by name.
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
Iam trying to make a service with Vuejs.
Here is the router-link and I'd like to make a dynamic url with each user's ID.
As you can see, named route 'profile' has an initial param "0".
However, I do not need to put "0" because this params will be needed when user post ajax request.
RestAPI Controller function
→index()...getAllUsersProfiles()
→show($id)...getUsersProfileById($id)
First, I tried {user_id : " "} in router-link but ".../profile/list/undefined" was returned and of course I can not call api. Anyway, even though parameter "0" is not match for user_id, I have to put some number as an initial parameter to avoid "undefined".
index.vue
<router-link tag="li" :to="{name: 'profile', params: {user_id : '0'}}"><button class="btn btn-success">profile</button></router-link>
app.js
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent },
{ path: '/top', name: 'top', component: require('./components/TopView.vue') },
{ path: '/profile/list/:user_id', name: 'profile', component: require('./components/ProfileList.vue') },
]
})
Is there any way to deal " "case and "2 or 3 or...(user_id)"case in one route?