Develop Reference

Vue router url changes but not the content

When I access http://127.0.0.1:8080, in the browser url it shows http://127.0.0.1:8080/#/topicManagement/topicManagement
When I click the div(which has to="/topicManagement/appConfigTopic"), it route to http://127.0.0.1:8080/#/topicManagement/appConfigTopic in the browser url, but the page content not changs.
I have read this Click on link changes the url but not the content/data on page, which has the same router. While mine has different router.
router config:
routes: [
{
path: '/',
redirect:'index',
},
{
path: '/index',
name: 'index',
component: index,
redirect:'/topicManagement',
children:[
{
path:'/topicManagement',
name:'topic',
component:topicManagement,
//redirect:'/topicManagement/topicManagement',
children:[
{
path:'/topicManagement/topicManagement',
name:'topicManagement',
componment:topicManagement
},
{
path:'/topicManagement/appConfigTopic',
name:'appConfigTopic',
componment:appConfigTopic
},
{
path:'/topicManagement/courseInteractTopic',
name:'courseInteractTopic',
componment:courseInteractTopic
}
]
}
}
]
template
topicManagement
<template>
<div>
<div>
<div>
<span class="title">主题管理</span>
</div>
<div class="table">
<router-link to="/topicManagement/appConfigTopic" class="inline cell">
<span>+</span>
<span>添加APP配置主题</span>
</router-link>
<router-link to="/topicManagement/courseInteractTopic" class="inline cell">
<span>+</span>
<span>添加课中互动主题</span>
</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>
Edit
when I change to below router, it show empty page for http://127.0.0.1:8080/#/topicManagement
routes: [
{
path: '/',
redirect:'index',
},
{
path: '/index',
name: 'index',
component: index,
redirect:'/topicManagement',
children:[
{
path:'topicManagement',
name:'topicManagement',
component:topicManagement,
//redirect:'topicManagement',
children:[
/*
{
path:'/topicManagement/topicManagement',
name:'topicManagement',
componment:topicManagement
},
*/
{
path:'appConfigTopic',
name:'topicManagementAppConfigTopic',
componment:appConfigTopic
},
{
path:'courseInteractTopic',
name:'topicManagementCourseInteractTopic',
componment:courseInteractTopic
}
]
}

You should remove the prepended slash / in the path of child routes :
...
{
path: '/index',
name: 'index',
component: index,
redirect:'/topicManagement',
children:[
{
path:'topicManagement',// not path:'/topicManagement'
name:'topic',
....

Vue nested route

I have the following route from my vue app. Where I've created a nested route.
With the following code I'm not able to see the contents of my children route /admin/create-post
When I vist the route /admin/create-post the content of it's parent route /admin is shown
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home')
},
{
path: '/admin', component: () => import('../views/auth/Dashboard'),
name: 'Dashboard',
children: [
{
path: 'create-post',
component: () => import('../views/auth/PostEdit'),
name: 'Create Post'
},
]
},
{
path: '*',
component: () => import('../views/error/404')
}
]
Working demo: Code sandbox

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>

VueJS Router-link not linking to the view

I have a problem with the router link. When I put it in a view, it works very well, I have a clickable link. But when I put a router link in a component, built into a view, then the router link no longer works: I would like "just" to link to the detail of a project.
This work (resources/js/views/HomepageView.vue)
<router-link :to="{ name: 'projects.show', params: { slug: slideshowProject.slug }}">
<a href="#" class="btn-secondary">See
Campaign</a>
</router-link>
This doesn't work (resources/js/components/UserProject.vue)
<router-link :to="{ name: 'projects.show', params: { slug: project.slug }}">
<h4>{‌{ project.title}}</h4>
</router-link>
Script part of the page :
<script>
export default {
name: "user-projects",
data() {
return {
projects: null
}
},
mounted() {
this.getUserProject()
},
methods: {
getUserProject() {
this.$store.dispatch('getUserProjects', {
limit: 2
}).then(response => {
this.projects = response.data.data;
})
}
},
}
</script>
My router.js
import Homepage from '../views/frontend/HomepageView';
import ProjectDetails from '../views/frontend/ProjectDetailsView';
import LoginView from '../views/frontend/LoginView';
import RegisterView from '../views/frontend/RegisterView';
import DashboardIndexView from '../views/dashboard/DashboardIndexView';
export const routes = [
{
path: '',
name: 'homepage',
component: Homepage
},
{
path: '/login',
name: 'frontend-login',
component: LoginView
},
{
path: '/projects/:slug',
name: 'projects.show',
component: ProjectDetails
},
{
path: '/register',
name: 'frontend-register',
component: RegisterView
},
{
path: '/dashboard',
name: 'dashboard-index',
component: DashboardIndexView
}
];
I don't understand where is my mistake :/

You can check slug is not empty before render a router link, like below sample:
<router-link v-if="project.slug" to="{ name: 'projects.show', params: { slug: project.slug }}">
<h4>{‌{ project.title}}</h4>
</router-link>
But I am sure, why slug is empty.

Thanks to Jom, the problem was that my "slug" was empty, and indeed when i look at the console, the warning was there.
[vue-router] missing param for named route "projects.show": Expected "slug" to be defined

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>