Taking my first stab at Vue2 and am stuck with routes.
Basically, when I added <router-view></router-view> to index.html I started receiving the exception:
[Vue warn]: Failed to mount component: template or render function not
defined.
found in
---> <Anonymous>
<Root>
GitHub Code Link: https://github.com/kernelcurry/httpverbs-site/tree/c56ba0a45445f7d28c31cb6928471da3619a3327
I even looked up a video tutorial on this topic and they seem to have no problems, but I do. (Video Link: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/26)
To clarify, the error did not occur until I added <router-view></router-view> to index.html (Line Link: https://github.com/kernelcurry/httpverbs-site/blob/c56ba0a45445f7d28c31cb6928471da3619a3327/index.html#L10)
I wish I could give more insight into that is going on here, but I am at a loss. Thanks to anyone willing to look at the code and point me in the correct direction :)
Change your src/routes.js as follows:
import VueRouter from 'vue-router';
import Home from './views/home.vue'
import About from './views/about.vue'
let routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
];
export default new VueRouter({
routes
});
Related
Hello I am currently doing the front end of my project.
I would like to render components dynamically depending on the route.
For example I have a /auth route then it links to /auth/login or /auth/register or /auth/forgot.
This is the place where I would like to see the different components rendered.
I was assuming I can use router-view to loud the different components into the DOM.
<template>
<head-comp></head-comp>
<router-view></router-view>
<footer-comp></footer-comp>
</template>
<script>
import HeaderComp from '../components/Universal/HeaderComp.vue'
import FooterComp from '../components/Universal/FooterComp.vue'
export default
{
components: {
'header-comp' : HeaderComp,
'footer-comp' : FooterComp
}
}
</script>
This is the router
{
path: '/auth',
name: 'auth',
component: () => import('../views/AuthView.vue'),
children: [
{
path: 'login',
name: 'auth.login',
component: () => import('../components/Authentication/LoginComp.vue')
},
],
}
And this is the vue file that will contain the login form.
<tempalte>
Login
</tempalte>
<script>
</script>
The error I get with my current approach is this.
The requested module '/src/components/Authentication/LoginComp.vue?vue&type=tempalte&index=0&lang.tempalte' does not provide an export named 'default'
I was thinking I could just use different views for example, login/registerView.vue instead of having them in components but I feel like this is messier and would make it harder to maintain in the future.
Thanks for reading and looking forward to your responses.
You have typos in your LoginComp.vue component.
<tempalte>
Login
</tempalte>
should be
<template>
Login
</template>
It doesn't do me the right thing, Url changes it but the page doesn't render it.
I have two home and jobs routes, I watched doc. From Angular, but not working
This is routing.module
import { Route, Routes, RouterModule } from '#angular/router';
import { NavigationJobsComponent } from './../jobs/navigation-jobs/navigation-jobs.component'
import { InputFieldComponent } from './components/input-field/input-field.component'
export const routes: Routes = [
{
path: "",
component: InputFieldComponent
},{
path: "jobs",
component: NavigationJobsComponent
},
];
This is dependency from module
RouterModule.forRoot(routes),
Surely someone has been hit by this before. Maybe this topic will be useful to someone, Excuse the emotions
"but the page doesn't render it"
It seems like you forgot to add <router-outlet></router-outlet> in your AppComponent's Template
Have created a Stackblitz Demo for your reference
As KShewengger has said above, look in your template if you're using the <router-outlet></router-outlet>. If you're using a navbar to navigate between routes, then you have to put the <router-outlet></router-outlet> in your navbar Component.
If not, try to use the <router-outlet></router-outlet> in your app.component.html (down if possible).
It would be nice if you could share your whole code about your issue, for better understand where could be it.
Created a simple Vue project using the CLI:
vue create my-project
Wanted to add two pages, so installed the latest version of vue-router (which is currently v3.4.8) and followed the vue mastery tutorial for routing.
This is what my router.js file looks like:
import { createWebHistory, createRouter } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
]
})
export default router
And of course, this is what my main.js file looks like:
import { createApp } from 'vue'
import router from './router'
createApp({
template: `
<div>
<router-link to='/'>Home</router-link>
<router-link to='/create'>Create</router-link>
</div>
`
})
.use(router)
.mount('#app')
Both of the Home and About components don't really have much in them, this is what they look like:
<template>
<div>TODO: Home</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
Anyway, all of this to say that I am getting the following error on:
Uncaught TypeError: Object(...) is not a function
at eval (router.js?41cb:5)
This is specifically on createRouter
Have I done something wrong?
Edit: as Boussadjra Brahim pointed out, originally createWebHistory was just being passed in without being a function call. I've since updated the code to include this.
Interestingly enough, once that was done, the error is not happening upon it's call.
This issue is caused when you install Vue router 3 with Vue 3 so you should uninstall the current version :
npm uninstall vue-router --save
and install the new one by :
npm i vue-router#next --save
Example
In my case it was the other way round (I was getting the same error), I had vue 2.6 installed and Vue Router 4, so I had to downgrade Vue Router to 3.5
For vue3 you should install the #4 package with the following command:
npm install vue-router#4
Please consult the following migration guide if you're having problems: Migrating from Vue 2
I have my VueJS app running. It is working fine but the only issue is that when I try to refresh the second or third level routing pages, it shows me an error message in the console, stating:
Failed to load resource: the server responded with a status of 404 ()
For eg.,
http://localhost:8080 renders me home page. No issue on refreshing.
http://localhost:8080/details renders details page. No issue on refreshing.
http://localhost:8080/details/users renders users page. On refreshing, it errors out.
I also have similar links defined for http://localhost:8080/details/assets and http://localhost:8080/details/groups which all errors out on page refresh.
Here is the code for main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import { routes } from './routes';
Vue.use(VueRouter);
//Vue.config.productionTip = false
const router = new VueRouter({
mode: 'history',
routes
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
new Vue(Vue.util.extend({ router }, App)).$mount('#app');
and for routes.js:
import Home from './components/summary.vue'
import Details from './components/details/details.vue'
import Users from './components/details/users/users.vue'
import Assets from './components/details/assets/assets.vue'
import Groups from './components/details/groups/groups.vue'
export const routes = [
{ path: '/', component: Home},
{ path: '/details', component: Details},
{path: '/details/users', component: Users},
{path: '/details/groups', component: Groups},
{path: '/details/assets', component: Assets}
];
Any idea on how to fix this issue?
As is described in official document of vue-router
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload
So navigating only in front end will not send request to back end, which is your spring boot application (you can see this from network traffic)
However, when you refresh your page, the request is sent directly to back end, which results the 404 error.
To fix your problem, one option could be setting a default 404 page to index.html which is suggested here
#Component
public class WebConfiguration implements EmbeddedServletContainerCustomizer {
#Override
public void customize(ConfigurableEmbeddedServletContainer configurableEmbeddedServletContainer) {
configurableEmbeddedServletContainer.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
}
}
Hope it works for you!
How do you override the routeIfAlreadyAuthenticated?
And once that happens, how can it transition to a route with a dynamic segment?
I realize I can override sessionAuthenticated; and in that ways override the functionality of routeAfterAuthentication. However, routeIfAlreadyAuthenticated is a computed property that is executed in a beforeModel in the unauthenticated-route-mixin.js mixin.
Any help would be greatly appreciated.
In app/session/route.js, just do:
import Ember from 'ember';
import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
export default Ember.Route.extend(UnauthenticatedRouteMixin, {
routeIfAlreadyAuthenticated: 'dashboard'
});
and it works, no more:
Error while processing route: session.login Assertion Failed: The route index was not found Error
The following works as well, but is deprecated
In config/environment.js:
var ENV = {
...
};
ENV['ember-simple-auth'] = {
// authenticationRoute: 'login',
// routeAfterAuthentication: 'dashboard',
routeIfAlreadyAuthenticated: 'dashboard'
};