We Keep Coding

Display layout based on boolean from Vuex

I got Vue2 app with vue-router with routings configured like that:
export default {
path: "/",
redirect: "/dashboard",
component: AdminLayout,
meta: {
requiresAuth: true
},
children: [
{
path: "/dashboard",
name: "Dashboard",
component: Dashboard
},
{
path: "/add/user",
name: "InviteUser",
component: InviteUser
},
{
path: "/groups",
name: "Groups",
component: Groups
},
...
In app, we got two different types of users - admin and normal user. Some of those routings should be accessible for both, but the problem is that user should see different layout base on its type (permission) - AdminLayout for admins and UserLayout for normal users.
Is there any way to show app which template should user see based on boolean from vuex with keeping route path?
on /dashboard admin will see dashboard with AdminLayout
on /dashboard normal user will see dashboard with UserLayout
My main routing cofig:
import Vue from "vue";
import VueRouter from "vue-router";
import SessionRoutes from "./session.js";
import AdminRoutes from "./admin.js";
import defaultRoutes from "./default";
Vue.use(VueRouter);
const routes = [AdminRoutes, SessionRoutes, defaultRoutes];
const router = new VueRouter({
mode: "history",
routes
});
export default router;

you can set a condition in the layout part on the current page for example for when you use nuxt:
<script>
export default {
layout: (ctx) => (ctx.isAdmin ? 'adminLayout' : 'userLayout'),
}
</script>
but I opine you don't use Nuxt.js and I think below solution is suitable for your question:
Using the meta-object in our route
set dynamic component on app.vue page
code for about.vue page
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import LayoutA from '../layouts/LayoutA.vue'
import LayoutB from '../layouts/LayoutB.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { layout: LayoutA }
},
{
path: '/about',
name: 'About',
component: About,
meta: { layout: LayoutB }
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router;
<!--app.vue page -->
<template>
<div id="app">
<component :is="this.$route.meta.layout || 'div'">
<router-view />
</component>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<!--about page-->
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<script>
export default {
name: "About"
};
</script>

To get a different layout working for the dashboard and all child routes your layouts have to use the router view component. I use a wrapper component to handle this in one of my projects following this approach.
Excerpt from my router config:
…
{
component: MainFrame,
name: 'main',
path: '/',
redirect: 'dashboard',
children: [
{
alias: 'dashboard',
component: Dashboard,
name: 'dashboard',
path: '', // Default child route → be equivalent to /dashboard
},
{
path: "add/user",
name: "InviteUser",
component: InviteUser
},
{
path: "groups",
name: "Groups",
component: Groups
},
],
},
…
In your MainFrame component you can wrap your layout in a dynamic component. So you can switch your layout easely based on a Vuex getter:
MainFrame.vue
<template>
<component :is="layout">
<!-- you can use slots too if you like -->
</component>
</template>
<script>
import AdminLayout from './AdminLayout'
import UserLayout from './UserLayout'
export default {
computed: {
layout() {
return this.$store.getters['isAdminUser'] ? AdminLayout : UserLayout
}
}
}
</script>
And your layouts have to use <router-view />. It works as a wrapper for all nested routes and therefore you have only one place to handle the layout for the dashboard and child pages:
AdminLayout.vue
<template>
<div class="auth-view">
<header>…</header>
<aside>…</aside>
<main>
<transition name="fade" mode="out-in">
<router-view />
</transition>
</main>
<footer>…</footer>
</div>
</template>
UserLayout.vue
<template>
<div class="guest-view">
<router-view />
</div>
</template>
EDIT:
This approach can be used for deeper nesting too. Assuming your user route should have another child routes you can solve this on the router config using a <router-view /> within a render function:
…
// Let's split down user related routes
{
component: { render: (h) => h('router-view') },
name: 'usersView',
path: 'users',
redirect: 'ListUsers',
children: [
// Show users
{
path: '', // route: /users/
name: 'ListUsers',
component: ListUsers
},
// Show a single user
{
path: ':id', // route: /users/{userId}
name: 'ViewUser',
component: ViewUser
},
// Invite new users
{
path: 'add', // route: /users/add
name: 'InviteUser',
component: InviteUser
},
]
}
…

Routing between two components in Vue.js

Well, this is my App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Home/>
<AddService/>
</div>
</template>
<script>
import Home from './components/Home.vue'
import AddService from './components/AddService.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/addService',
name: 'addService',
component: AddService
}
]
});
Vue.use(router)
export default {
name: 'App',
components: {
Home
}
}
</script>
I'd like to route between the Home and AddService Component. My Home page has a link which is basically this: Add a new Service
And if I press on this link I should get redirected to the AddService Component. But at the moment it only adds the right url in the search bar but I don't get redirected

When using Vue router you are not supposed to make your own anchor tags with hrefs for navigation. To navigate you can use the router-link component.
If you want to programmatically navigate you can use the push method on the router.

Your App.vue should look like this
<template>
<div id="app">
<router-view />
</div>
</template>
Your index.js should look like this
import Vue from 'vue'
import App from '#/App.vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import AddService from '#/components/AddService'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/add-service',
name: 'Add Service',
component: AddService
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
}).$mount('#app')
BUT best practise is to use an external router/index.js file to declare all your routes and import to the index.js(main app file) and use it when you declare new Vue instance.
After that you can have router-link in your code as
<router-link to="path">
or navigate programmaticaly with
this.$router.push({ name: AddService })
or
this.$router.push({ path: '/' })

Vue js Routers how to open a page when following a specific link

I am studying Vue JS and I have problems with routers, I want certain content to open when writing on the page address for example "Home", and more precisely, I have a component called HomePage, I want to open this component when writing in url " Home "for example "http://localhost:8080/Home" and by default, if nothing is specified in the address, then an empty page would open
App.vue
<template>
<HomePage></HomePage>
</template>
<script>
import HomePage from "#/View/HomePage/HomePage";
export default {
name: 'App',
components: {
HomePage
}
}
</script>
Edit
App.vue
<template>
<HomePage>
<router-view />
</HomePage>
</template>
<script>
import HomePage from "#/View/HomePage/HomePage";
export default {
name: 'App',
components: {
HomePage,
}
}
</script>
Index.js
import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute'
import Rar from "./src/View/Rar";
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'HomeRoute',
alias: '*',
component: HomeRoute
},
{
path: '/Rar',
name: 'Rar',
component: Rar
}
]
})
export default router

You should specify a path inside your routes.
Steps
Your main app.vue should look like this
<div>
<navbar />
<router-view />
<footer />
</div>
</template>
make a folder router and inside an index.js (or more structured files)
It must look like this
import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute'
import AboutRoute from '#/components/routes/AboutRoute'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'HomeRoute',
alias: '*',
component: HomeRoute
},
{
path: '/about',
name: 'About',
component: AboutRoute
}
]
})
export default router
The first path is the '/home' with alias *.
if you type '/home' in the url you will go to the main page.
Also the alias: '*' means that everything you type after will redirect you to this route, unless it finds another route registered

You are missing some code from main.js.
I cannot see Vue getting initalized anywhere.
You should import router in your main.js and use .use(router) in there
App.vue
<template>
<router-view />
</template>
/router/index.js
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute.vue'
const router = new Router({
routes: [
{
path: '/home',
component: HomeRoute
}
]
})
export default router
main.js
import Vue from 'vue'
import App from "./App.vue";
import router from '#/router'
const app = Vue.createApp(App)
app.use(router)
app.mount('#app')

You can check your HomePage component. Does it has slot that you put router-view there? What if you use simple router-view without HomePage? Did you register router in your main app.js?
And if I correctly understand you, you can do something like this to manage your routes in index.js
const router = new Router({
routes: [
{
path: '/',
beforeEnter: (from, to, next) => next({path: '/home'})
},
{
path: '/home',
name: 'HomeRoute',
component: HomeRoute
}
]
})
Read about VueRouter hooks https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
Also you can use children:
import HomeLayout from '#/layouts/HomeLayout.vue'
import HomePage from '#/views/HomePage.vue'
import HomeAbout from '#/views/HomePage.vue'
const router = new Router({
routes: [
{
path: '/',
beforeEnter: (from, to, next) => next({path: '/home'})
},
{
path: '/home',
component: HomeLayout,
children: [
// full url will be like: localhost:8080/home
{
path: '',
name: 'Home',
component: HomePage
},
// full url will be like: localhost:8080/home/about
{
path: 'about',
name: 'HomeAbout',
component: HomeAbout
}
]
}
]
})

Vue router changing the url but not the content

In Songs component I have a list of other albums, so whenever I click on one it should redirect me on /songs/:id. Each album has it's own id.
This is working from Home or any other component, but whenever I try to go from for example /songs/1 to /songs/2, it doesn't work. The URL changes but the webpage stays the same.
Here is my router index.js file.
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/songs/:id',
name: 'Songs',
component: () => import('../views/Songs.vue')
},
{
path: '/videos/:title/:index',
name: 'Videos',
component: () => import('../views/Videos.vue')
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
I was googling a little but nothing seems to work for me.

Import your song.vue in index.js
import Songs from '../views/Songs.vue'
Check your ../views/Songs.vue
yourlocalhost.url/mainapp/songs/1
Where '1' is a parameter named 'id' (url like /song/:id), try with:
this.$route.params.id

Vue not displaying component on particular route

Basically I want to render the Login component on my Login Route but it is not rendering-
Login component-
<template>
<v-app>
<h1>Login Component</h1>
</v-app>
</template>
<script>
export default {
}
</script>
Routes.js-
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import Register from '#/components/Register'
import Login from '#/components/Login'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/login',
name: 'login',
component: Login
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
this is my main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
el:'#app',
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
I am using vue version-2.6.10 and vue router version-3.1.2..it is also not showing any error please help.

Make sure that you wrap up the router-view></router-view> in <v-content></v-content> then only your routing will work properly. Otherwise only URL will change and the respective component will not render.