I have the following setup to my Vue project...
import UploadComponent from './Upload.vue'
import MainPageComponent from './MainPage.vue'
...
const router = new VueRouter({
routes: [
{ path: '/', component: MainPageComponent },
{ path: '/upload', component: UploadComponent }
]
});
...
let App = { router };
new Vue(App).$mount('#km-viewport');
Then in my html I have...
<div id="km-viewport">
<jg-app> </jg-app>
</div>
and inside the jg-app I have the following template...
<md-app-content>
<router-view></router-view>
</md-app-content>
Then in order to make this work with Spring Boot I add the following...
#Controller
public class MainEndpoint {
#GetMapping("")
public String rootRedirect(){return "redirect:/ui";}
#RequestMapping("/ui")
public String root(){
return "splash";
}
#RequestMapping("/ui/upload")
public String upload() { return "forward:/ui"; }
}
The problem is whether I got to <address>/ui or <address>/ui/upload they both show the same MainPageComponent. I can't figure out how to get the upload to show the upload component.
How do I use HTML5 urls with VueJS and Spring Boot?
It is possibly a difference in how Vue is handlings the URLs.
Try activating the history mode for vue-router:
const router = new VueRouter({
mode: 'history', // <=================== added this line
routes: [
{ path: '/', component: MainPageComponent },
{ path: '/upload', component: UploadComponent }
]
});
Related
Please help me fix this problem. I create application using Laravel 8, Blade templates and Vue 3 components.
In that i have basic routing in Laravel. I want to add nice looking menu in admin panel https://github.com/yaminncco/vue-sidebar-menu.
Unfortunately, I don't know how to pass my menu structure to this component. When I use the example from the documentation I get an error
Failed to resolve component: router-link
I dont use router in Vue. I see in documentation example with Customize link with InertiaJa but i dont know how use it because i dont use and know InertiaJS.
My simple MainMenu.vue component code:
<template>
<SidebarMenu :menu="menu"></SidebarMenu>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
export default {
name: "MainMenu",
components: {
SidebarMenu
},
data() {
return {
menu: [
{
header: 'Main Navigation',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fa fa-user'
},
{
href: '/charts',
title: 'Charts',
icon: 'fa fa-chart-area',
child: [
{
href: '/charts/sublink',
title: 'Sub Link'
}
]
}
]
}
}
}
</script>
<style scoped>
</style>
Ok, I found a solution to the problem. Need to add own code which create\render simple link in html
in app.js add:
/*remaining application code*/
import { createApp, h } from "vue";
const customLink = {
name: 'CustomLink',
props: ['item'],
render() {
return h('a', this.$slots.default())
}
}
const app = createApp({});
app.component('custom-link', customLink)
/*remaining application code*/
and in Vue Component:
<SidebarMenu :menu="menu" :link-component-name="'custom-link'"></SidebarMenu>
I'm trying to create aplication using Vue.js and Spring boot. After switching to a different route using Vue routing my page reloads. I'm using this pice of code to forward to my client side route.
#Controller
class FrontController {
#GetMapping("/**/{path:[^\\.]*}")
fun redirect(#PathVariable path: String): String {
return "forward:/index.html"
}
}
index.js
const routes = [
{
path: '/sad',
name: 'AdminDashboard',
component: AdminDashboard
},
{
path: '/',
name: 'UserList',
component: UserList
},
{
path: '/role/all',
name: 'RoleList',
component: RoleList
},
{
path: '/course/all',
name: 'CourseList',
component: CourseList
},
{
path: '/category/all',
name: 'CategoryList',
component: CategoryList
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
Here is a gif to show my problem: https://imgur.com/zv0CIzv. So ye I'm trying to get rid off that flashing when switching on different pages. It works fine on Microsoft Edge, but not on Chrome and Firefox.
fun redirect(#PathVariable path: String, e:event): String {
e.preventDefault();
return "forward:/index.html"
}
Why when I use Vue.component to load the two commented components below, I get the following error in the javascript console while it works with import ?
Uncaught ReferenceError: dashboard is not defined
app.js:
Vue.component('left-menu', require('./components/LeftMenu.vue').default);
// Vue.component('dashboard', require('./components/foo/dashboard.vue').default);
// Vue.component('members', require('./components/foo/members.vue').default);
import dashboard from './components/foo/dashboard.vue';
import members from './components/foo/members.vue';
const routes = [
{
path: '/dashboard',
component: dashboard
},
// {
// path: '/members',
// component: members
// }
];
Because you use dashboard variable in your routes, this variable exists in "import way" but not in "Vue component way"
In the example that generates errors the components are not recognized as variables, so you should do something like :
const dashboard = {
template: `<div>Dashboard</div>` ,
}
const routes = [
{
path: '/dashboard',
component: dashboard
},
// {
// path: '/members',
// component: members
// }
];
I try to get parameters from url
let's say url contains:
localhost:8000/blog?q=hello
I want to grab hello to trigger function call
What I had declare in app.js in laravel webpack:
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: []
})
const app = new Vue({
router
});
export default app;
In blog page, I try to extract the parameter from url
new Vue ({
el: "#blog-content",
},
mounted: function() {
q = this.$route.query.q
console.log(q)
}
)
I npm run dev to compile and run the blog page it show error:
TypeError: Cannot read property 'query' of undefined
what is wrong? I am sure that Vue Router is properly installed in the application.
I think that the blog page that you use is not correct.
You recreate another Vue instance and in that case that new instance doesn't have a router passed to it. So I think that's why this.$router is undefined.
Also you don't pass the view Component to your router so it doesn't know what to look for with the specific url.
Here's your app.js file corrected
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Blog from './views/Blog';
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/blog',
name: 'blog',
component: Blog
},
]
});
The blog view page template : views/Blog.vue
<template>
<div class="wrapper">
My blog page
</div>
</template>
<script>
export default {
data() {
return {
myvariable : ''
}
},
mounted() {
let q = this.$route.query.q;
console.log(q);
},
};
</script>
Now it should works correctly :)
Edit : Also you don't need to export the app variable in your app.js
Remove the following line export default app; at the end of the file
I have been working on an Angular 2 project using lazy loading. It's working well, but what I need is to get the module name from the server and then create a route, but it's not working.
Here is what I have:
import { Routes, RouterModule } from '#angular/router';
function getRoutes(): Routes{
let x: any = [
{path: '', redirectTo: 'welcome', pathMatch: 'full'},
{path: 'backend', loadChildren: 'app/backend/backend.module'}
]
return x;
}
export const routes: Routes = routess();
export const routing = RouterModule.forRoot(routes);
And here is, what do i need:
import { Routes, RouterModule } from '#angular/router';
function getRoutes(): Routes{
let x: any;
$.get( "api/getRoutes", function( data ) {
x = data; //object array from server
});
return x;
}
export const routes: Routes = routess();
export const routing = RouterModule.forRoot(routes);
The problem is, that the function getRoutes is not waiting for the server result and returns empty data.
Is there any way to wait for the server data and then add data to the routes?
Use NgModule just for basic routing setup (/welcome, etc.), then somewhere else in your app load routes and update router configuration. You can then use resetConfig():
this.http.get('/api/getRoutes')
.subscribe(config => this.router.resetConfig(config))