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?
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>
I’m new to VueJS and front end development.
I’m looking to pass a props (in this case, my club’s id) to my component/view.
It was initially working with <router-link :to="{ name: 'club', params: {id: club.id } }">.
My component call a props “id”, and my view, named club has the parameter props:true;
Fast forward a little later, i had to add named view. (I only added one for now - but i’ll have a view content and one nav).
mode: 'history',
base: process.env.BASE_URL,
linkExactActiveClass: 'is-active',
routes: [
{
path: '/',
name: 'clubs',
components: {
content: Clubs
}
},
{
path: '/club/:id',
name: 'club',
props: true,
components: {
content: Club
}
}
]
})
And this broke everything.
In the Vue extension, i can see that my send is sending my props as a param (see attachement 1), but once on the view, the id is undefined (see attachment 2).
Am i missing anything?
Attachement 1
Attachement 2
You'd need to set a props value for each named view in that case. e.g.
components: {
content: Club
},
props: {
content: true
}
I can't find a decent explanation of this in the documentation but it does feature in an example here:
https://router.vuejs.org/guide/essentials/passing-props.html
Note the following comment lurking in the code example:
// for routes with named views, you have to define the `props` option for each named view:
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.
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/'
I am researching whether a vue router is the best approach for the following scenario:
I have a page containing 'n' number of divs. Each of the divs have different content inside them. When a user clicks on a button in the div, I would like the div to open in a separate browser window (including its contents).
Can a route name/component be created on the fly to route to? Since I have 'n' number of divs, that are created dynamically, I cannot hard-code name/components for each one
<router-link :to="{ name: 'fooRoute'}" target="_blank">
Link Text
</router-link>
I want to avoid the same component instance being used (via route with params) since I may want multiple divs to be open at the same time (each one in their own browser window)
If the link is opening in a separate window, it makes no sense to use a <router-link> component as the application will load from scratch in any case. You can use an anchor element instead and generate the href property dynamically for each div.
To answer your questions:
A route name cannot be created dynamically since all routes must be defined at the beginning, when the app (along with router) is being initialized. That said, you can have a dynamic route and then dynamically generate different paths that will be matched by that route.
There is no way for the same component instance to be reused if it's running in a separate browser window/tab.
It is possible to create dynamic router name.
profileList.vue
<template>
<main>
<b-container>
<b-card
v-for="username in ['a', 'b']"
:key="username"
>
<b-link :to="{ name: profileType + 'Profile', params: { [profileType + 'name']: username }}">Details</b-link>
</b-container>
</main>
</template>
<script>
export default {
name: 'profileList',
data () {
return {
profileType: ''
}
},
watch: {
// Call again the method if the route changes.
'$route': function () {
this.whatPageLoaded()
}
},
created () {
this.whatPageLoaded()
},
methods: {
whatPageLoaded () {
this.profileType = this.$route.path // /user or /place
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
b-container, b-card, b-link are taken from bootstrap-vue, so you can freely change it.
router.js
const router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
linkExactActiveClass: 'active',
routes: [
// USERS
{
path: '/user/:username',
name: userProfile,
component: userProfile
},
{
path: '/user',
name: 'userList',
component: profileList
},
// PLACES
{
path: '/place/:placename',
name: placeProfile,
component: placeProfile
},
{
path: '/place',
name: 'placeList',
component: ProfileList
}
]
})