I've follwed this tutorial setting up my vuetify project: https://www.youtube.com/watch?v=FbEW3xAmhKs
I did the follwing:
vue create vuetify-test -> I chose "manually" -> Babel, Router, linter -> history router (yes) -> Eslint only with error prevention
thats it. After that I ran "npm run serve" and when I click the localhost...-link I get a blank page. with the developer tools in firefox I can see that all tags are at the top in one line. What am I doing wrong??
//router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
Related
My Laravel 8 project was working perfectly. I switched all my code to Laravel 9 and I get the above error? My code is exactly the same. In addition I am getting a ChunkLoadError? I have tried refreshing the page, clearing my views. My app.js is as follows:
require('./bootstrap');
import { createApp } from "vue";
import * as VueRouter from 'vue-router';
import HomeComponent from "./Components/Home/HomeComponent.vue";
import NavbarComponent from './Components/Navbar/NavbarComponent.vue';
const SudokuComponent = () => import(/* webpackChunkName: "games/sudoku" */ "./Components/Games/Sudoku/SudokuComponent.vue");
const routes = [
{
name: 'home',
path: '/',
component: HomeComponent
},
{
name: 'sudoku',
path: '/sudoku',
component: SudokuComponent
}
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes,
});
const app = createApp({});
app.use(router);
app.component('navbar-component', NavbarComponent);
app.mount('#app');
I can see the sudoku.js loaded in my dev tools but I keep getting the ChunkLoadError?
The link would be like this: https://server/fleet/20210705001. How can I display this page when someone enters this link in address bar from anywhere. No authentication, no security, just the page needs to be opened. I have this working in local but couldn't make it work in production. Can someone help me?
This is my index.js in router folder
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Fleet from '../views/Fleet.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/feedback/:id',
name: 'Fleet',
component: Fleet,
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
next();
});
export default router
And this is my main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//import './axios-settings'
//Vue.config.productionTip = true;
createApp(App).use(router).mount('#app')
Can someone guide me?
router.beforeEach((to, from, next) => {next({ name: 'Fleet' });});
I am using Laravel 8 Vuejs 2.17 and VueRouter 3.4,
i have two components Orders.vue and Users.vue
this is how my app.js looks like
require("./bootstrap");
window.Vue = require("vue");
import Vue from "vue";
//? Vue router
import VueRouter from "vue-router";
import routes from "./routes";
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
router,
}).$mount("#app");
and here is how router.js looks like
import Orders from './appComponents/Orders';
import Users from './appComponents/Users';
const routes = [
{
path: "/admin/orders",
name: 'orders',
component: Orders,
},
{
path: "/admin/users",
name: 'users',
component: Users,
},
];
export default routes;
i called the routes in my laravel view like :
<router-link :to="{ name: 'users' }">users</router-link>
<router-link :to="{ name: 'orders' }">Orders</router-link>
the browser response with
[vue-router] Route with name 'users' does not exist
[vue-router] Route with name 'orders' does not exist
i also tried to call the routes by its path but still not working, anyone please can help me.
i found the solution, i've installed a an npm modules, and there was a conflict between the module app.js and my app.js
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 to realise Angular 2 unit Test on routes and I fail with errors.
My application start with that content within app.component.html
<app-top-menu></app-top-menu>
<router-outlet></router-outlet>
I have those routes:
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
{path: 'Second', component: SecondComponent, canActivate: [AuthGuard]},
{path: 'Third', component: ThirdComponent, canActivate: [AuthGuard]},
{path: 'Fourth', component: FourthComponent, canActivate: [AuthGuard]},
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: '**', component: PageNotFoundComponent}
];
When you acccess the application you're first redirected toward a login page for authentification.
All other page can only be accessed if logged.
Within app.component.html we first have app-top-menu before router-outlet.
The component app-top-menu is hidden and appear only once the user is logged.
This tricked has been made to hide the app-top-menu component from login page.
When we log in login component we do that action to display the component app-top-menu
this.globalEventsManager.showNavBar(true);
Everyting works fine when I run ng serve - I use angular cli.
The UI is working very well.
But when I run ng test I get a first error in app.component
AppComponent should create the app
Failed: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("<app-top-menu></app-top-menu>
[ERROR ->]<router-outlet></router-outlet>"): AppComponent#1:0
then a second within SecondComponent about routerLink.
Failed: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
<h1>Home</h1>
<p>You're logged in with JWT!!</p>
<p><a [ERROR ->][routerLink]="['/login']">Logout</a></p>
</div>"): SecondComponent#3:10
Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
Here is the content of my app.component.spec.ts
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
TopMenuComponent
]
});
TestBed.compileComponents();
});
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
How can I mock the router and test routes.
Also the app-top-menu is involved as it appears/disappear according to login.
Thanks for your help.