Develop Reference

Vue router doesn't redirect to welcome page, if 404 page is defined with alias *

I have the following route configuration. I would expect the router to redirect the client to /dashboard when entering the page without any url extension. However, it displays the 404 page. If I comment out alias: '*' for the 404 page (which technically disables it form my understanding), the redirect works as expected.
function configRoutes() {
return [
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: TheContainer,
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: Dashboard
},
{
path: 'pickingList/:roleID-:roleName/:viewID-:viewName',
name: 'Kommissionierliste',
component: PickingList
},
{
path: 'admin/clients',
name: 'Clients',
component: AdminClients,
meta: {
requiresUserGroup: 'admin'
},
children: [
{
path: ':id-:name',
name: 'Clienteinstellungen',
component: AdminClientSettings,
meta: {}
}
]
},
{
path: 'admin/roles',
name: 'Rollen',
component: AdminRoles,
meta: {
requiresUserGroup: 'admin'
},
children: [
{
path: ':id-:name',
name: 'Rolleneinstellungen',
component: AdminRoleSettings,
meta: {}
}
]
},
{
path: 'login',
name: 'Login',
component: Login
},
{
path: 'admin/viewers',
name: 'Ansichten',
component: AdminViewerRoles,
meta: {
requiresUserGroup: 'admin'
},
children: [
{
path: ':id-:name',
name: 'Ansichtseinstellungen',
component: AdminViewerRoleSettings,
meta: {}
}
]
},
{
path: '404',
name: 'PageNotFound',
component: PageNotFound,
alias: '*',
meta: {
label: 'Seite nicht gefunden'
}
}
]
}
]
}
How can I fix that?

You should move the 404 page up in the tree to be out of any children arrays, remove its alias and instead set its path to be *. The catch-all route should always be last in your list of routes (otherwise it will hide all routes which are listed after it in the array).
Variant 1 - all routes are wrapped by TheContainer
App.vue
<template>
<TheContainer>
<MySidebar slot="sidebar" />
<router-view />
</TheContainer>
</template>
Variant 2 - custom layout in each route
App.vue
<template>
<router-view />
</template>
Route A
<template>
<LayoutA>
<Sidebar slot="side" />
<Toolbar slot="top" />
<!-- content specific to the route -->
</LayoutA>
</template>
Route B
<template>
<LayoutY>
<MyToolbar slot="top" />
<!-- content for this route -->
<MyFooter slot="bottom" />
</LayoutY>
</template>

Angular Router does not load my component despite correct URL

I'm trying to load my Angular component with my router, but it never shows up nor throws an error.
app-routing-module
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{
path: 'home', component: HomeComponent, children:
[
{ path: 'compare', component: CompareComponent, children:[] },
{
path: 'settings', component: SettingsComponent, children: [
{ path: 'new', component: ServerConnectionEditComponent }
]
},
]
},
app-server-connections
constructor(private router:Router, private route:ActivatedRoute) { }
onAddServer()
{
console.log(this.route.url)
this.router.navigate(['new'], {relativeTo: this.route});
}
It seems the URL is valid, because any other URL throws an error.
app-server-connection-edit
ngOnInit() {
console.log("in Edit") //never gets here
}
server-connections.component.html
...
<th scope="col"><button type="button" class="btn btn-success btn-sm"
(click)="onAddServer()">+</button></th>
app-component.html
<app-header></app-header>
<div class="container">
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
settings.component.html
<div class="container">
<div class="row">
<div>
<div class="col-md-12" >
<h4>Server Connections:</h4>
</div>
<br/>
<div class="col-xs-12">
<app-server-connections [serverConnections]="serverConnections"></app-server-connections>
</div>
</div>
</div>
</div>

You can only have 1 level nested child in your route. So change your route like this. If this is not work open browser console to see if it there any error
{
path: 'home', component: HomeComponent, children:
[
{ path: 'compare', component: CompareComponent },
{
path: 'settings/new', component: ServerConnectionEditComponent
},
{ path: 'settings', component: SettingsComponent }
]
}
And make sure add <router-outlet></router-outlet>
inside your app.component.html

The more specific must come in order before the less specific. So, settings/new must be in order before settings.

Activate router-link that has multi level nested routes with CRUD setup

I trying to setup deep nesting like below, and I am kinda sure about we cannot use exact in router-link for nested routes.
<div id="app">
<nav class="nav nav-main">
<router-link exact to="/" class="nav-link" activeClass="active">Dashboard</router-link>
<router-link to="/projects" class="nav-link" activeClass="active">Projects</router-link>
</nav>
<div class="parent-content">
<h4>Content for Parent goes here</h4>
</div>
<router-view>
<nav class="nav nav-main">
<router-link :to="'/projects/' + $route.params.projectId" class="nav-link" activeClass="active">Deals</router-link>
<router-link :to="'/projects/' + $route.params.projectId + '/commitments/'" class="nav-link" activeClass="active">Commitments</router-link>
</nav>
<router-view>
<div class="child-content">
<h4>Content for Child goes here</h4>
</div>
</router-view>
</router-view>
</div>
My Route:
routes: [
{
path: '/',
component: Dashboard
},
{
path: '/projects',
component: Projects
},
{
path: '/projects/:id',
name: 'projects-detail',
component: ProjectDetails,
children: [
// DEALS
{
path: '/projects/:projectId/deals',
component: Deals
},
{
path: '/projects/:projectId/deals/:dealId/details',
component: DealDetails
},
// COMMITMENTS
{
path: '/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit',
component: CommitmentEdit
}
]
}
]
With the above setup, I need to activate router-links, when the route is:
/projects/:projectId/deals/:dealId/details then activate Deals
/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit then activate Commitments

I think you have not another <router-view></router-view> inside ProjectDetails component add this and try.
Also remove /projects/:projectId from all child path as you have already in parent path path: '/projects/:id',
So final you route would be
routes: [
{
path: '/',
component: Dashboard
},
{
path: '/projects',
component: Projects
},
{
path: '/projects/:id',
component: ProjectDetails,
children : [
// DEALS
{
path: 'deals/:dealId/details',//path will be /projects/:projectId/deals/:dealId/details
component: DealDetails
},
{
path: 'deals',.// path will be /projects/:projectId/deals
component: Deals
},
// COMMITMENTS
{
path: '/deals/:dealId/commitments/:commitmentId/edit/',
component: CommitmentEdit
}
]
}
]
Here is working fiddle : https://jsfiddle.net/chyLjpv0/16/
Read more about child path.
If you need not and component depended on parent dont make it as child use directly as root path like
routes: [
{
path: '/',
component: Dashboard
},
{
path: '/projects',
component: Projects
},
{
path: '/projects/:id',
component: ProjectDetails,
},
// DEALS
{
path: '/projects/:projectId/deals/:dealId/details',
component: DealDetails
},
{
path: '/projects/:projectId/deals',
component: Deals
},
// COMMITMENTS
{
path: '/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit/',
component: CommitmentEdit
}
]
Working fiddle for this : https://jsfiddle.net/chyLjpv0/17/
Class router-link-exact-active is already working in this example : https://jsfiddle.net/chyLjpv0/18/ to display link as active
In your edit
Why you put <router-view> inside <router-view>. Outer is only working as it is being replaced and inner <router-view> is worthless. Use <router-view> in parent component for child component.
Also your inner <router-view> is not closed properly like </router-view>

Vue.js 2 router only loading component from navigation and not from URL

When clicking to view page content from the menu the correct component loads. However, when I go it directly from the URL it doesn't.
This is the master page (which loads the menu):
<template>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<router-link to="/new-page" type="button" class="btn btn-primary btn-lg btn-block">New page</router-link>
<div class="list-group sidebar">
<router-link v-for="page in pages" class="list-group-item" :to="'/pages/' + page.slug">{{ page.menu_title }}</router-link>
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
computed: {
pages() {
return this.$store.state.pages
}
},
created() {
this.$http.get('pages').then((response) => {
this.$store.commit('setPages', response.body)
console.log(response)
}, (response) => {
console.log("Error: " + response)
})
}
}
</script>
This is the content which loads a content type depending what page type is clicked. You can use multiple templates which reloads with different data (that part is OK)
<template>
<div>
<div class="loader" v-if="loading">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div v-if="!loading">
<vc-gig :content="content" v-if="content.type == 'gig'"></vc-gig>
<vc-news :content="content" v-if="content.type == 'news'"></vc-news>
<vc-home :content="content" v-if="content.type == 'home'"></vc-home>
<vc-image :content="content" v-if="content.type == 'image'"></vc-image>
</div>
</div>
</template>
<script>
import Gig from '../Gig.vue'
import News from '../News.vue'
import Home from '../Home.vue'
export default {
components: {
'vc-gig': Gig,
'vc-news': News,
'vc-home': Home,
},
data() {
return {
loading: true,
content: [],
}
},
created() {
this.getPageData
},
watch: {
'$route': 'getPageData'
},
methods: {
getPageData() {
this.loading = true
this.$http.get('pages/' + this.$route.params.pageSlug).then((response) => {
this.content = response.body
this.loading = false
console.log(response.body)
}, (response) => {
console.log(response)
})
}
}
}
</script>
All components load correctly when clicking the menu (in the first code section) but if I add the URL manually in the browser the page content (second code section) wont load.
Update: Here is my full routes.js file:
import Vue from 'vue'
import VueRouter from 'vue-router'
// Public
import Home from './views/Pages/Home.vue'
// Authentication
import Login from './views/Auth/Login.vue'
import Register from './views/Auth/Register.vue'
import Onboarding from './views/Auth/Onboarding.vue'
import ResetPassword from './views/Auth/ResetPassword.vue'
// Pages & Items
import Pages from './views/Pages/Layout/PageMaster.vue'
import Page from './views/Pages/Layout/PageSinge.vue'
import Item from './views/Pages/Layout/PageItem.vue'
import NewPage from './views/Pages/NewPage.vue'
// Options
import Options from './views/Options/Layout/OptionsMaster.vue'
import Themes from './views/Options/Themes.vue'
import Logo from './views/Options/Logo.vue'
import SocialMediaIcons from './views/Options/SocialMediaIcons.vue'
import WebsiteTitle from './views/Options/WebsiteTitle.vue'
import DomainName from './views/Options/DomainName.vue'
import Meta from './views/Options/Meta.vue'
import AnalyticsWebtools from './views/Options/AnalyticsWebtools.vue'
// My Account
import Account from './views/Account/Layout/AccountMaster.vue'
import Billing from './views/Account/Billing.vue'
import Details from './views/Account/Details.vue'
import Password from './views/Account/Password.vue'
Vue.use(VueRouter)
const Router = new VueRouter({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: Login,
meta: {guest: true}
},
{
path: '/register',
name: 'register',
component: Register,
meta: {guest: true}
},
{
path: '/reset-password',
name: 'reset-password',
component: ResetPassword,
meta: {guest: true}
},
{
path: '/onboarding',
name: 'onboarding',
component: Onboarding
},
{
path: '/',
name: 'home',
redirect: 'pages/home',
component: Home,
meta: {auth: true}
},
{
path: '/new-page',
name: 'newpage',
component: NewPage,
meta: {auth: true}
},
{
path: '/pages',
name: 'pages',
redirect: 'pages/home',
component: Pages,
meta: {auth: true},
children: [
{
path: ':pageSlug',
name: 'page',
component: Page,
},
]
},
{
path: '/pages/:pageSlug/:itemSlug',
name: 'item',
component: Item,
meta: {auth: true}
},
{
path: '/options',
name: 'options',
redirect: 'options/themes',
component: Options,
meta: {auth: true},
children: [
{
path: 'themes',
name: 'themes',
component: Themes
},
{
path: 'logo',
name: 'logo',
component: Logo
},
{
path: 'social-media-icons',
name: 'socialmediaicons',
component: SocialMediaIcons
},
{
path: 'website-title',
name: 'sitetitle',
component: WebsiteTitle
},
{
path: 'domain-name',
name: 'domain',
component: DomainName
},
{
path: 'meta-text-image',
name: 'meta',
component: Meta
},
{
path: 'analytics-webtools',
name: 'tools',
component: AnalyticsWebtools
},
]
},
{
path: '/account',
name: 'account',
component: Account,
meta: {auth: true},
children: [
{
path: 'billing',
name: 'billing',
component: Billing
},
{
path: 'details',
name: 'details',
component: Details
},
{
path: 'password',
name: 'password',
component: Password
},
]
}
]
})
Router.beforeEach(function (to, from, next) {
// User is authenticated
if (to.matched.some(function (record) {
return record.meta.guest
}) && Vue.auth.loggedIn()) {
next({
path: '/pages'
})
} else {
next()
}
// User not authenticated
if (to.matched.some(function (record) {
return record.meta.auth
}) && !Vue.auth.loggedIn()) {
next({
path: '/login'
})
} else {
next()
}
})
export default Router

Simple fix, you are not calling the method you created.
created() {
this.getPageData
},
should be
created() {
this.getPageData()
},
Also perhaps using a linter such as eslint would help avoid these mistakes.
http://eslint.org/
Happy coding!

router-link not rendering links properly

I am trying to iterate over some data to produce my router-links
<router-link v-for="(data, dataKey) in dataObject"
:to="{ params: { dataKey: dataKey }}"
tag="li">
<a>
<span>
{{ dataKey }}
</span>
</a>
</router-link>
This creates the tags with the right strings but doesn't append dataKey to the link when I'm not one of the links I'm trying to build.
dataKey even prints out properly within the <span> </span>
However, when I navigate manually to one of the links, all the params are properly appended.
export const routes = [
{ path: '/', component: Home, beforeEnter: checkAuthentication },
{ path: '/dashboard',
component: Dashboard,
children: [
{
path: '',
component: DashboardHome,
name: 'Dashboard Home'
},
{
path: 'profile',
component: DashboardPhotos,
children: [
{
path: '',
component: DashboardPhotosHome,
name: 'Dashboard Profile Home'
},
{
path: ':dataKey',
component: PhotoViewer,
props: true
}
]
},