I have a nested route that is not rendering and throws an error:
vue.esm.js?efeb:571 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <BlEditOrder>
<BlOrders> at src\components\orders\Orders.vue
<VContent>
<VApp>
<App> at src\App.vue
<Root>
Routes:
{
path: '/orders',
name: 'orders',
component: Orders,
beforeEnter: Auth,
children: [
{ path: '', component: OrdersList },
{
path: 'new',
name: 'newOrder',
component: NewOrder
},
{
path: ':id',
name: 'editOrder',
component: EditOrder,
props: true
}
]
}
EditOrder.vue:
<template>
<h1>Edit Order</h1>
</template>
<script>
export default {
name: 'blEditOrder',
props: ['id'],
data: function() {
return {
}
},
created() {
console.log('this.id', this.id);
}
}
</script>
Orders.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'blOrders',
data: function() {
return {}
},
methods: {}
}
</script>
<style scoped>
</style>
OrdersList is rendering just fine, but when i go to order/new or orders/1234 i get the above mentioned error.
I do see the log statement, it logs 1234.
I have no idea what's wrong :(
Finally got it, the problem was that i extracted the scripts to a different file:
<script src="./new">
</script>
and since my vue file is called New.vue, and my js is called new.js, webpack got confused and didn't import them correctly.
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 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 the following link in a VueJS component:
<router-link :to="{ name: 'time', props: { tax: 123, site: site_key }}">Add New Request</router-link>
The Time component has the following code, its always showing the default, instead of the value:
<template>
<div>t {{ tax }} {{site}}</div>
</template>
<script>
export default {
name: "Time",
props: {
tax: {
type: String,
default: 'Vue!'
},
site: {
type: String,
default: 'Vue!'
}
}
}
</script>
EDITED
const router = new Router({
routes: [
{
path: '/',
name:'home',
component: Home,
},
{
path: '/time',
name:'time',
component: Time,
props: { tax: null, site: null }
},
]
})
As seen in Vue Router :
https://router.vuejs.org/guide/essentials/passing-props.html
Props are passed by the params field, so like this :
<router-link :to="{ name: 'time', params: { tax: 123, site: site_key }}">Add New Request</router-link>
for a much more insight on your problem, please include your router.js file.
A warning is shown in the console:
the id param was not provided.
The docs mention that the current route will be used:
current is the current Route by default (most of the time you don't
need to change this)
html code:
<div id="app">
<router-link to="/5">/5</router-link>
<button #click="onClick">Resolve</button>
</div>
js code:
new Vue({
el: '#app',
router: new VueRouter({
routes: [
{
name: 'foo',
path: '/:id',
component: {
template: '<div>Foo <router-view/></div>',
},
children: [
{
name: 'bar',
path: 'bar',
component: {
template: '<div>Bar</div>'
}
}
]
},
],
}),
methods: {
onClick() {
console.log('Omitting current');
this.$router.resolve({ name: 'bar' });
console.log('Including current');
this.$router.resolve({ name: 'bar' }, this.$route);
}
}
});
I know this is overdue, but I'll share what I found.
When you call $router.resolve(), it uses vue-router/src/util/location.js's normalizeLocation() to get the Location object.
And you can see there that the current? option is only used to resolve relative paths.
The only case where current.params is included in the new Location is when the given RawLocation is relative, and includes params itself.
I am a beginner in vuejs.
I have an issue with some practice about vue-router nested route.
Just in case, This is a nested route config.
const router = new Router({
routes: [
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
meta: {
requiresAuth: true
},
children: [
{
path: 'overview',
name: 'Overview',
component: Overview,
meta: {
requiresAuth: true
}
}
]
}
]
})
If I want to pass data from a child route (overview) to parent route (dashboard)
How should I handle it ?
I don't want the url have any change (/dashboard/overview), just receive the data params from child route.
You might want to consider using Vuex as a means of sharing state across different components (or maybe not if you're a beginner).
Alternatively you can just emit an event in the child component:
Vue.use(VueRouter);
var Parent = {
template: '<router-view #data="onData"></router-view>',
methods: {
onData(data) {
alert('Got data from child: ' + data);
},
},
};
var Child = {
template: '<div><input v-model="text"><button #click="onClick">Click Me</button></div>',
data() {
return {
text: 'Hello',
};
},
methods: {
onClick() {
this.$emit('data', this.text);
},
},
};
var router = new VueRouter({
routes: [
{
path: '',
component: Parent,
children: [
{
path: '',
component: Child,
},
],
},
],
});
new Vue({
el: '#app',
router,
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>
<div id="app">
<router-view></router-view>
</div>