Currently I am working on a project where I have two components with a router-view, Auth and Dashboard. These two components have different html strucutures but use the same base path in routing path: ''.
The routing file would look like:
{
path: '/',
component: Dashboard,
children: [
...
],
path: '/',
component: Auth,
children: [
...
]
}
Ofcourse this will create complications since the paths are the same. Is there any way have a parent component without a path?
You can create a new component that shows the Dashboard or Auth components conditionally, then set that as the component for the '/' path in the routes config.
Something like this:
<template>
<auth v-if="isAuthenticating" />
<dashboard v-else />
</template>
Related
Hello I am currently doing the front end of my project.
I would like to render components dynamically depending on the route.
For example I have a /auth route then it links to /auth/login or /auth/register or /auth/forgot.
This is the place where I would like to see the different components rendered.
I was assuming I can use router-view to loud the different components into the DOM.
<template>
<head-comp></head-comp>
<router-view></router-view>
<footer-comp></footer-comp>
</template>
<script>
import HeaderComp from '../components/Universal/HeaderComp.vue'
import FooterComp from '../components/Universal/FooterComp.vue'
export default
{
components: {
'header-comp' : HeaderComp,
'footer-comp' : FooterComp
}
}
</script>
This is the router
{
path: '/auth',
name: 'auth',
component: () => import('../views/AuthView.vue'),
children: [
{
path: 'login',
name: 'auth.login',
component: () => import('../components/Authentication/LoginComp.vue')
},
],
}
And this is the vue file that will contain the login form.
<tempalte>
Login
</tempalte>
<script>
</script>
The error I get with my current approach is this.
The requested module '/src/components/Authentication/LoginComp.vue?vue&type=tempalte&index=0&lang.tempalte' does not provide an export named 'default'
I was thinking I could just use different views for example, login/registerView.vue instead of having them in components but I feel like this is messier and would make it harder to maintain in the future.
Thanks for reading and looking forward to your responses.
You have typos in your LoginComp.vue component.
<tempalte>
Login
</tempalte>
should be
<template>
Login
</template>
I cannot seem to figure out how this is working, I have an app with two router-outlet tags. Neither of the tags have a name associated with them, so how are the components displayed in the correct outlet?
const routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'user',
component: HomeComponent,
children: [
{
path: 'settings',
component: SettingsComponent
},
{
path: 'profile',
component: ProfileComponent
}
]
}
]
Then in the AppComponent template there is this, which shows the LoginComponent and the HomeComponent.
<header></header>
<main>
<router-outlet></router-outlet>
</main>
<footer></footer>
Then in the HomeComponent template there is this, which shows the SettingsComponent or ProfileComponent.
<ul class="nav"></ul>
<div class="content">
<router-outlet></router-outlet>
</div>
From what I have read, you need to have a named outlet and tell the route which outlet to render to. Why do I not need one here? This still works. What is happening? I cannot find a reasoning for this on Google other than to use a route with a name.
nested primary router outlets work fine and are very commonly used, in fact, it's the ONLY way parent / child routes can work.
With nested outlets, the router figures out what to render pretty intuitively, based on the parent / child structure of your route config.
You only need named outlets if they are siblings.
I want to structure my router.js file as currently there is around 500 lines of code in it.
{
path: "/",
component: () => import("./../src/views/dashboard/Dashboard.vue"),
meta: {
auth: true,
title: "Dashboard"
}
},
{
path: "/regionWiseDashboard",
component: () => import("./../src/views/dashboard/RegionWiseDashboard.vue"),
meta: {
auth: true,
title: "Dashboard"
}
},
The above code is repeating for every component I include in my project which just makes the code look more and more unreadable. Can I structure it anyhow? Maybe put all files in an JSON or divide the main js file into children js files?
How I structured my routes in vue.
First: create a folder named routes, inside this folder, create subfolders depends on how you group your routes. Example, villages, dashboard, user
Second: create a main route inside your routes folder. This main route will hold and import all your routes made in villages, dashboard, user.
last: import this main route to your main app.js
Having trouble using VueJS (first time using it)
I have 90% of my page template in the index.html file in doc root
I have 3 components (each contains the main content body for each 'page')
My router:
export default new Router({
mode: 'history',
hash: false,
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/gallery',
name: 'Gallery',
component: Gallery
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
})
I can't get <router-link :to="{ name: 'Gallery' }">Gallery</router-link> to work - my site doesn't render them as anchor tags in my index.html (I'm probably not understanding how/where Vue can be used there) - so I'm using a standard link e.g. <a class="nav-link" href="/gallery">Gallery</a>
The problem:
While all of this code works fine on my local machine, it doesn't work anywhere that I upload my code to (I would like to have it working on Netlify). Netlify and other sites overwrite my attempts to remove the hash, so my links then link to e.g.
https://examplesite.com/#/ => https://examplesite.com/gallery#/
hash is not a Router option. Try removing this.
To use history mode on Netlify, you have to add a _redirects file to your public directory.
Add this to the file:
/* / 200
This will make sure that all paths are handled by the vue-router
I have the following routes:
ReactDOM.render(
React.createElement(ReactRouter.Router, {history: ReactRouter.hashHistory},
React.createElement(ReactRouter.Route, {path: '/', component: AppController}),
React.createElement(ReactRouter.Route, {component: LayoutController},
React.createElement(ReactRouter.Route, {path: '/dashboard', component: DashboardController}),
React.createElement(ReactRouter.Route, {path: '/signout', component: UserSignoutController})
)
)
, document.getElementById('content'));
This is how I redirect the application flow:
ReactRouter.browserHistory.push('/dashboard');
It works, but if I open my application on another machine with a different url structure, and I have to change url paths, I also have to change every push argument.
Is there a way to redirect using route names instead of paths?
In older versions it was possible to navigate by name, but AFAIK it is no longer working. In my opinion what you should do is to configure the basename of the history for your different servers, i.e. the prefix of the route. Take into account that the final part of the URL, the one that is configured by react-router is fixed.
In order to specify the basename, you should pass a custom history to the router.
useRouterHistory(createBrowserHistory)({ basename })