I'm having a problem with Vue JS Nested Routes. Children component is not showing. Here's my code.
Router
{
path: '/events',
name: 'Events',
components: {
default: () => import('#/views/SideNavigation/Events/index.vue'),
sidebar: () => import('#/components/SideNavigation/index.vue')
},
children:[
{
path: 'list',
component: { default: () => import('#/views/SideNavigation/Events/EventLists/index.vue'), }
},
{
path: 'create',
name: 'Create',
component: {
create: () => import('#/views/SideNavigation/Events/CreateEvent/index.vue'),
}
}
]
},
Event.vue (Parent)
<template>
<div class='events px-md-5 px-5 py-md-5 text-white'>
<router-link to="/events">/events</router-link>
<router-link to="/events/create">/create</router-link>
<router-view />
</div>
</template>
I have router-view in my App.vue. When I click the links my children components is not showing also the script is not found
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
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 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
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
How to trigger a transition when transitioning between the same component?
(With vue-router 1, there was a canReuse hook. It doesn't exist anymore in vue-router 2.)
const Index = {
template: `<div id="app">
<router-link :to="{ path: '1' }">page 1</router-link> |
<router-link :to="{ path: '2' }">page 2</router-link>
<router-view></router-view>
</div>`
};
const Page = {
template: `<transition #enter="transitionEnter" #leave="transitionLeave">
<div>
<p>page {{ id }}</p>
</div>
</transition>`,
data() {
return {
id: this.$route.params.id,
}
},
methods: {
transitionEnter(el, done) {
console.log('transitionEnter');
done();
},
transitionLeave(el, done) {
console.log('transitionLeave');
done();
},
fetchData() {
this.id = this.$route.params.id;
}
},
watch: {
'$route': 'fetchData'
},
};
const App = Vue.extend(Index);
const router = new VueRouter({
routes: [{
path: '/:id',
component: Page
}, {
path: '*',
redirect: '/1'
}]
})
const app = new App({ router }).$mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
Use the key parameter on the router-view.
const Index = {
template: `<div id="app">
<p>app</p>
<router-link :to="{ path: '1' }">page 1</router-link> |
<router-link :to="{ path: '2' }">page 2</router-link>
<router-view :key="'a' + $route.params.id"></router-view>
</div>`
};
const Page = {
template: `<transition #enter="transitionEnter" #leave="transitionLeave">
<div>
<p>page {{ id }}</p>
</div>
</transition>`,
data() {
return {
id: this.$route.params.id,
}
},
methods: {
transitionEnter(el, done) {
console.log('transitionEnter');
done();
},
transitionLeave(el, done) {
console.log('transitionLeave');
done();
},
},
};
const App = Vue.extend(Index);
const router = new VueRouter({
routes: [{
path: '/:id',
component: Page
}, {
path: '*',
redirect: '/1'
}]
})
const app = new App({ router }).$mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>