I am working with Vue.js and I have a question.
Is there a way to hide sidebar component only some page ?
This is my code below.
router.js
const routes = [
{
path: '/',
redirect: '/home',
component: () => import('#/layout/MainLayout'),
children: [
{
path: 'home',
name: 'Home',
component: () => import('Views/Home.vue'),
},
],
},
{
path: '/subpage',
redirect: '/subpage/subpage',
component: () => import('#/layout/MainLayout'),
children: [
{
path: 'subpage',
name: 'Subpage',
component: () => import('Views/Subpage/Subpage.vue'),
},
],
},
];
MainLayout.vue
<template>
<div id="content" class="content">
<router-view></router-view>
<Sidebar></Sidebar>
</div>
</template>
<script>
import Sidebar from '#/components/Sidebar.vue';
export default {
components: {
Sidebar,
},
};
</script>
Do I need to make another layout? like MainLayout2.vue
Please help.
You can add meta information to vue routes. Add the sidebar key to the routes you want to hide
{
path: '/subpage',
redirect: '/subpage/subpage',
component: () => import('#/layout/MainLayout'),
children: [
{
path: 'subpage',
name: 'Subpage',
meta:{sidebar:false}
component: () => import('Views/Subpage/Subpage.vue'),
},
],
},
Then in your layout component, make a computed property to check if the current route needs to hide the sidebar
computed:{
shouldShowSidebar(){
return this.$route.meta.sidebar!==false;
}
}
Then use this computed property to conditionally hide the sidebar on specific routes
<Sidebar v-if="shouldShowSidebar"></Sidebar>
You can add meta:{sidebar:false} to any route you want the sidebar to be hidden on
Related
I have this template for my Routing:
<template>
<article>
<router-view name="modal" />
<div class="l-app-container">
<router-view name="sidebar" />
<router-view name="main" class="main" />
</div>
</article>
</template>
This works fine when calling most routes:
const routes = [
{
path: "/",
name: "app",
components: {
main: AppBase, // This components content is: `<router-view name="content"></router-view>`
sidebar: Sidebar,
},
children: [
{
path: "orders",
name: "app.orders",
components: {
content: Orders,
},
},
{
path: "order",
name: "app.order",
components: {
content: Order,
},
children: [
{
path: "details",
name: "app.order.details",
components: {
tab: OrderDetails,
},
},
{
path: "create",
name: "app.order.create",
components: {
modal: OrderCreate,
},
},
],
},
],
},
];
export default createRouter({
history: createWebHashHistory(),
routes,
});
The Sidebar and Main router-view are working fine when routing.
But what I want, is that when calling app.order.create, it routes the component to the <router-view name="modal" />, but it doesn't.
It expects that that router-view is inside the AppBase component. But I need it outside that 'main` router-view.
Not only because of the front-end is written that way, but also because that's more flexible for all other routes that the App has.
I try to use to generate a dynamic nav list from my routes in my routes.js:
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', name: 'home', component: () => import('pages/Index.vue') },
{ path: '/users', name: 'users', component: () => import('pages/Users.vue') },
{ path: '/news', name: 'news', component: () => import('pages/News.vue') },
],
},
// Always leave this as last one,
// but you can also remove it
{
path: '*',
component: () => import('pages/Error404.vue'),
},
];
export default routes;
that's the part of my MainLayout for the navigation list:
<ul>
<li v-for="item in routes" :key="item">
<router-link :to="item.path">{{item.name}}</router-link>
</li>
</ul>
But I can't get a list and I'm getting no error, did I maybe use the global MainLayout.vue wrong here which contains my header and footer and other global stuff or how can I get all the paths from just one children?
I think you are looking for this:
computed: {
routeList() {
return this.$router.options.routes
}
}
Got it, I added all Layout Stuff into my App.vue and uses the routes like normal, why so complicated :)
const routes = [
{ path: '/', name: 'home', component: () => import('pages/Index.vue') },
{ path: '/users', name: 'users', component: () => import('pages/Users.vue') },
{ path: '/news', name: 'news', component: () => import('pages/News.vue') },
{ path: '*', component: () => import('pages/Error404.vue') },
];
export default routes;
and as nav links:
<router-link
v-for="route in $router.options.routes"
:key="route.path"
:to="route.path"
>{{ route.name }}</router-link
>
works as aspected.
I want to create a nested route with its children's route.
Basically what I want is,
https://localhost/contact render the ContactList component.
https://localhost/contact/add render the ContactAdd component.
What I have tried is:
let Layout = {
template: '<div>Layout Page <router-view></router-view></div>'
};
let Home = {
template: '<div>this is the home page. Go to <router-link to="/contact">contact</router-link> </div>'
};
let ContactList = {
template: '<div>this is contact list, click <router-link to="/contact/add">here</router-link> here to add contact</div>'
};
let ContactAdd = {
template: '<div>Contact Add</div>'
}
let router = new VueRouter({
routes: [{
path: '/',
redirect: 'home',
component: Layout,
children: [{
path: 'home',
component: Home
},
{
path: 'contact',
component: ContactList,
children: [{
path: 'add',
component: ContactAdd
}]
},
]
}]
});
new Vue({
el: '#app',
components: {
'App': {
template: '<div><router-view></router-view></div>'
},
},
router
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router#3.0.1/dist/vue-router.js"></script>
<section id="app">
<app></app>
</section>
Here, the problem is when I change the route from /client to /client/add, the view doesn't render. What is the problem with the nested children's route here? How to solve this issue?
I check this documentation https://router.vuejs.org/guide/essentials/nested-routes.html, but It didn't help in this case.
You need to add one <router-view> in the template of <ContactList> to load its children route.
Or if you'd like to display ContactAdd in Layout, moves ContactAdd to direct child of path=/.
let Layout = {
template: '<div>Layout Page <router-view></router-view></div>'
};
let Home = {
template: '<div>this is the home page. Go to <router-link to="/contact">contact</router-link> </div>'
};
let ContactList = {
// add <router-view> in order to load children route of path='/contact'
template: '<div>this is contact list, click <router-link to="/contact/add">Add Contact In sub Router-View</router-link> here to add contact<p><router-view></router-view></p> Or Click <router-link to="/addcontact">Add Contact In Current Router-View</router-link></div>'
};
let ContactAdd = {
template: '<div>Contact Add</div>'
}
let router = new VueRouter({
routes: [{
path: '/',
redirect: 'home',
component: Layout,
children: [{
path: 'home',
component: Home
},
{
path: 'contact',
component: ContactList,
children: [{
path: 'add',
component: ContactAdd
}]
},
{
path: 'addcontact', // or move ContactAdd as direct child route of path=`/`
component: ContactAdd,
}
]
}]
});
new Vue({
el: '#app',
components: {
'App': {
template: '<div><router-view></router-view></div>'
},
},
router
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router#3.0.1/dist/vue-router.js"></script>
<section id="app">
<app></app>
</section>
I have navigation drawer and this nav contained number of pages ..i want to add new page that will be contain another url but open in the same page with master page...is that possible ???
fev.vue file
<template>
<v-app>
<div class="feb">
<v-card>
<div> {{ callfeb}} </div>
</v-card>
</div>
</v-app>
</template>
export default {
computed: {
callfeb(){
href = 'https://######',
target='_self'
//window.location.href = 'https://#####'
}
}
}`</script>`<style></style>``
App.vue
computed: {
items() {
return [
{
icon: 'link',
text: i18n.t('H-D'),
path: '/feb',
perms: 'read:feb',
show: true
},
]
}
router.ts
router [
{
path: '/feb',
name: 'feb',
props: route => ({
query: route.query,
isKiosk: route.query.kiosk,
hash: route.hash
}),
component: () =>
import(/* webpackChunkName: 'user' */ './views/feb.vue'),
meta: { title: 'feb', requiresAuth: true }
},
]
the above codes are working and open the url in same page but the master content will not show. I want the url will open in the same page with master content
I have used vue-tree-navigation for implement this Tree navigation menu .
When I hit a menu item (eg :- Create item) it should route to the create item component.
But it's only print the name of the route in the navigation bar and doesn't route to any where.
http://localhost:8080/inside#item
how do I fixed this problem?
this is my routes.js file
const routes = [
{ path: "/", component: welcome },
{
path: "/inside",
component: inside,
name: inside,
children: [
{ path: "/category", component: category, name: category },
{ path: "/sub-category", component: subCategory, name: subCategory },
{ path: "/item", component: item, name: item }
]
}
];
This is my component
<template>
<div class="inside">
<div class="sideBar"><vue-tree-navigation :items="items" /></div>
<div class="content"><router-view></router-view></div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Item Master', route: 'inside', children: [ // /about
{ name: 'Create item category', element: 'category', },
{ name: 'Create item sub category', element: 'sub-category', },
{ name: 'Create item', element: 'item', },
]},
],
};
}
};
</script>
Try to change a bit of things in the router file, it works well for me:
The components starts in Uppercase (just a convention)
The name with ''
Delete the / in the path
Like this:
path: "inside",
component: Inside,
name: "inside",
children: [
{ path: "category", component: Category, name: 'category' },
{ path: "sub-category", component: SubCategory, name: 'subCategory' },
{ path: "item", component: Item, name: 'item' }
]
And the most important, load (if you are not doing it already) the VueRouter with:
var router = new VueRouter({
const routes = [
...
]
});
Hope it helps!