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,
}
],
},
Related
I'm a bit new to Vue routes. I have a table in Home.vue and each row has a button in order to go to the details. I'll try to explain what I imagine. I want the redirection to open a new screen Overview with a sidebar that has 3 options: Overview, Commits and Files. My problem is to understand what should be the parent and what should the child. I'm sure that Commits and Files are children but should Overview be also a child or the parent of Commits and Files? The row that redirects to details:
<router-link :to="{ 'name': 'details', 'params': { 'tool': tool } }">{{id}}</router-link>
The routes that I currently have:
const DetailsChildren = [
{
path: 'commits/:tool',
name: 'commits',
component: commits
},
{
path: 'files/:tool',
name: 'files',
component: files
}
];
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
{
path: '/overview/:tool',
name: 'details',
component: details,
children: DetailsChildren
}
],
mode: 'history'
});
And DetailsChildren is as follows:
<template>
<div class="main">
<sidebar />
<router-view />
</div>
</template>
Currently DetailsChildren is Overview. But I think DetailsChildren should be the parent of Overview, Files and Commits and then I need to create another component Overview. But then I have two problems. First one is how I load Overview when I move from the table to DetailsChildren? The second one is that I want the route to be /overview/:tool. I'm a bit confused. What would be best way to handle the routes in this situation?
What you want to do is have three children under your details route, each with their own absolute path from /.
const DetailsChildren = [
{
path: '/overview/:tool',
name: 'overview',
component: overview
},
{
path: '/commits/:tool',
name: 'commits',
component: commits
},
{
path: '/files/:tool',
name: 'files',
component: files
}
];
This will create the following path mappings
/overview/:tool
Top-level component: details
Child component: overview
/commits/:tool
Top-level component: details
Child component: commits
/files/:tool
Top-level component: details
Child component: files
See the guide on Nested Routes.
You may think you can use an empty path for the overview route but this would then require the URL to have a trailing slash (ie /overview/tool/) and I figured you don't want that.
It's also recommended to remove the name from your details route and instead, link to the default child route (ie overview). Eg
<router-link :to="{ name: 'overview', params: { tool } }">{{id}}</router-link>
Otherwise, the router gets confused about which to display, the parent (empty) or child.
Your sidebar links can simply use the child route names to create their links, eg
<nav>
<ul>
<li>
<router-link :to="{name: 'overview'}">Overview</router-link>
</li>
<li>
<router-link :to="{name: 'commits'}">Commits</router-link>
</li>
<li>
<router-link :to="{name: 'files'}">Files</router-link>
</li>
</ul>
</nav>
When I try to push a new profile with an profileID with VueRouter I get an error saying: Avoided redundant navigation to current location: "/user/ID". When clicking on the button it is not redirecting me to another page, it just jumps to the beginning of the current page.
I declared my routes in my index.js file like this:
const routes = [
{
path: '/',
name: 'EntryPoint',
component: EntryPoint
},
{
path: '/main',
name: 'Main',
component: Main
},
{
path: '/user/:id',
name: 'User Current',
component: CurrentUser
},
When I am on an user page the path in the url already contains an userID - so f.e. #/user/1111.
Now on the same user page I want to navigate to another user when the user clicks on a button:
<ContactCard
v-for="user in users"
#goToUser="goToUser(user.id)"
/>
goToUser(userId) {
this.$router.push({ name: "User Current", params: { id: userId } });
},
The id which I get from my users array contains different id´s for each user.
Any suggestions why the routing is not working properly?
When clicking on the button I see for an instance that the url is changing with the right path: #/user/1112. Inseatd of updating the page it removes the url, jumps to top and gives me the error message from above when selecting the button again.
When I log
console.log(this.$route.path);
on button click I get the correct route - /user/ID but it is not updating anything.
UPDATE:
As Zdravko Pernikov suggested I keyed my and it works:
<template>
<div id="app">
<div id="nav">
<label>Welcome</label>
<router-link to="/main">Welcome</router-link>
<router-link to="/User">User</router-link>
</div>
<router-view :key="$route.path"/>
</div>
</template>
This may happen because you are reusing your CurrentUser component and you are not listening for changes since it's already rendered.
You can try keying your global router view <router-view :key="$route.path"></router-view> your components will be rerendered on different routes.
I have got the url in this form /#/isms/register/VYOYHDpg/oBkYmHlxtB8mQ==
I have the vue-router configured as :
{
path: "/isms/register",
component: Layout,
children: [
{
path: ":code",
name: "WOTC URL page",
component: ISMSHome,
props: true
}
]
}
In my ISMSHome component
created() {
alert(this.$route.params.code)
}
But, the route never reach the ISMSHome component, it couldn't redirect to anywhere in the app.
I couldn't now change the server code that generated that URL but i do have to make some work-round to redirect the browser from register pages to another page.
I had tried to pass the url parameter from the props to another component. But, that too didn't work.
I would try something like this:
{
path: "/isms/register/:code",
component: Layout,
children: [
{
path: "",
name: "WOTC URL page",
component: ISMSHome,
props: true
}
}
Note: Remember that you need to add <router-view /> inside your Layout component as well.
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
Currently I have my router set up to link to page components. Each of these page components have sub components so for example.
Home
<slider></slider>
<section></section>
<section></section>
<section></section>
<panel></panel>
Say I wanted to link to the Home page components component is this possible.
So the route would be http://example.com/home/panel
The above is just an example but is ideally what I am looking for. Any help would be awesome.
You can use nested routes by defining the routes children:
const routes = [{
path: '/home',
component: Home,
children: [{
path: 'panel',
component: Panel
}]
}]
Then in your Home component you would place a router-view tag to serve up the component:
<router-view></router-view>
Here's the JSFiddle: https://jsfiddle.net/craig_h_411/srxafk39/