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>
Related
TL:DR;Is it possible to make the router-view display a component without being on that component route ?
I am trying to imitate a carousel effect using router-view inside a child component.
The problem is that if I don't click on a router-link the router-view displays nothing.
I want to make on of the router-link be active when no other is in order to force the router-view to always display something.
App.vue with the top router-view:
<template>
<div id="app">
<router-view />
</div>
</template>
Router index.js:
const routes = [
{
path: "/",
name: "LandingPage",
component: LandingPage,
children: [
{
path: "/icons",
name: "Icons",
component: () => import(/* webpackChunkName: "about" */ "../components/portfolio/Icons.vue"),
},
],
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
scrollBehavior(to, savedPosition) {
if (to.hash) {
return {
selector: to.hash,
behavior: "smooth",
// offset: { x: 0, y: 75 }
};
} else {
return savedPosition;
}
},
});
LandingPage.vue:
<template>
<div class="page">
<Home></Home>
<About></About>
<Portfolio></Portfolio>
<Contact></Contact>
</div>
</template>
Portfolio.vue with the second router-view:
<template>
<section id="portfolio">
<ul>
<li v-for="slide in slider" :key="slide.path">
<router-link :to="`/${slide.link}`">{{ slide.text }}</router-link>
</li>
</ul>
<router-view />
</section>
</template>
As you can see I have only one route, which is / for the top router-view. This will render LandingPage.
I use hashes to navigate to the components inside LandingPage like so: <router-link :to="{ path: '/', hash: #${link.path} }">
I am trying to make the router-link :to="/icons" active and the Icons component render inside Portfolio's router-view when no other link from Portfolio is active.
It's important for it to remain active only inside Portfolio, because I have a Navbar with other router-link which go to various hashes inside LandingPage.
Is this even possible ?
If I understood, you want to show Icon when the route is '/'.
To define a default sub-route you need to have a route with an empty value (path:'').
Now if you don't want to change path use the 'alias' mechanism.
const routes = [
{
path: "/",
name: "LandingPage",
component: LandingPage,
children: [
{
path: "/icons",
alias: '',
name: "Icons",
component: () => import(/* webpackChunkName: "about" */ "../components/portfolio/Icons.vue"),
},
],
},
];
If alias doesn't meet your needs, define your sub-route twice(One by empty path second by '/icons')
You can also define /icons as the main route:
const routes = [
{
path: "/icons",
name: "LandingPage",
component: LandingPage,
children: [
{
path: "",
name: "Icons",
component: () => import(/* webpackChunkName: "about" */ "../components/portfolio/Icons.vue"),
},
],
},
];
I have an application with authentication system and a backend dashboard.
By default the route show the authentication component :
{
path: "/",
name: "Authentication",
component: Auth
},
The App.view contains the
Once logged in I'm redirected to another vue component "home" :
{
path: "/dashboard",
name: "home",
component: Home,
},
So far, so good. In this home component i have some HTML with menu and I want to to show component in the same page.
Here is a sample of html from the home template
<div>
<router-link :to="'/dashboard/user'">User</router-link>
<router-link :to="'/dashboard/stats'">Stats</router-link>
<app-user></app-user>
<app-stats></app-stats>
</div>
I also created the routes for those components in router but while clicking on the link it shows a white page. I just began vue.js and I'm sure it's an easy stuff to manage. My objective is to display the component according to the page which is displayed.
Update your routing file like below so parent module can load its children in their respective router outlet.
Place <router-view></router-view> in your dashboard component so it will load its children.
If you visit /dashboard/user then UserCompoent will get render in <router-view></router-view> of dashboard component.
{
path: "/dashboard",
name: "home",
component: Home,
children: [
{
path: 'user',
component: UserComponent,
},
{
path: 'state',
component: StateComponent,
}
],
},
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/'
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?