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 Material Tabs not showing content

The program must shows the page when that is selected from tab using Vue Material Tab. I've configured routes and installed dependencies but when I click on the tab not is showed. The code have two Vue components to test two screens content. The ideia is show a row like toolbar at top of view and populate it with tabs. The two screens are Menu and Home.
App.vue
<template>
<div>
<md-tabs md-sync-route>
<md-tab id="tab-home" md-label="Home" to="/components/Home" exact></md-tab>
<md-tab id="tab-pages" md-label="Pages" to="/components/Menu"></md-tab>
</md-tabs>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
import Menu from '#/components/Menu'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.use(VueMaterial)
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/Menu',
name: 'Menu',
component: Menu
},
]
})
Menu.vue
<template>
<div>
<h1>Menu</h1>
</div>
</template>
<script>
export default {
name: 'Menu'
}
</script>
Home.vue
<template>
<div>
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>

Yo don't have routes with path /components/Home and /components/Menu in your router config. So provide correct path's.
<md-tab id="tab-home" md-label="Home" to="/Home" exact></md-tab>
<md-tab id="tab-pages" md-label="Pages" to="/Menu"></md-tab>

Vue router does not render/mount root path component

i am making a page with vue, vue-router and laravel, the problem, when i enter in localhost/myproject/public_html/, the Home component is not rendered in the router-view, if i click in the router link to the Service component, it render the content normally, and when i click to the home path it render the home component content, so why this happens? this is my app.js structure
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import Home from './views/Home'
import Service from './views/Service'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: 'servicios',
'name' : 'services',
component: Service
}
],
});
const app = new Vue({
el: '#app',
components : { App },
router,
});
this is my App.vue
<template>
<div>
Hola
<router-link :to="{ name : 'services' }">
ir a servicios
</router-link>
<router-view>
</router-view>
</div>
</template>
<script>
import PageLogo from '../components/PageLogo'
import Loading from '../components/Loading'
export default {
mounted : function(){
console.log(this.$router.currentRoute.path)
},
components : {
'page-logo' : PageLogo,
'loading' : Loading
},
methods : {
ajaxOver : function() {
}
}
}
</script>
this is my Home.vue
<template>
<div class="row">
Home page
<router-link :to="{ name : 'services' }">
go to services
</router-link>
</div>
</template>
<script>
export default {
mounted: function() {
console.log('hola')
}
}
</script>
and this is Service.vue
<template>
<div>
Services page
<router-link :to="{ name : 'home' }">
go to home
</router-link>
</div>
</template>
<script>
export default {
mounted : function(){
console.log('services')
}
}
</script>
so how can i solve this? if i reload the page in any route, the component should be mounted, but in the vue router is not being displayed, so the component is not mounted.
Edit:
As requested, in App.vue the log is /myproject/public_html/

I've never used Laravel before, but I think you're looking for base.
Vue docs:
type: string
default: "/"
The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value "/app/".
Since you're serving your project at localhost/myproject/public_html/, vue is seeing /myproject/public_html/ instead of /.
You can change this by adding the base route to the vue-router constructor.
const router = new VueRouter({
mode: 'history',
base: '/myproject/public_html/',
...
}