Trying to implement vue router. Getting the error:
Cannot read property 'forEach' of undefined
at createRouterMatcher
Vue Version: #vue/cli 4.5.9. I have two views/pages already formatted and ready to implement. My home page will be basically be the index.vue. Ive tried playing around with index.js and main.js but can't seem to get it to work.
src/main.js
import { createApp } from 'vue'
import { routes } from './router/index'
import { createRouter, createWebHistory } from 'vue-router'
require('dotenv').config();
import App from './App.vue'
import './index.css'
let app = createApp(App)
let router = createRouter({
history: createWebHistory(),
routes,
})
app.use(router)
app.mount('#app')
src/router/index.js
import Index from '../views/index.vue'
import About from '../views/about.vue'
const routes = [
{
path: "/",
name: "Index",
component: Index
},
{
path:"/about",
name: "About",
component: About
}
]
export default routes;
src>App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
Both my views index.vue & about.vue both have export default { name: 'pagename'} accordingly
You're using a default export, which means routes is not a named export and shouldn't use brackets. This will fix the problem:
import routes from './router/index' // no brackets
But I recommend doing all of the router setup in the router file and exporting the router instead of the routes:
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/index.vue'
import About from '../views/about.vue'
const routes = [
{
path: "/",
name: "Index",
component: Index
},
{
path:"/about",
name: "About",
component: About
}
]
let router = createRouter({
history: createWebHistory(),
routes,
})
export default router;
main.js
import { createApp } from 'vue'
import router from './router/index'
require('dotenv').config();
import App from './App.vue'
import './index.css'
let app = createApp(App)
app.use(router)
app.mount('#app')
Related
When I run npm run serve I get the This dependency was not found error, relating to the router that I'm trying to use in the main.js. I don't understand why this happens - the router is created and exported from src/router/router/js file and imported in the main.js file.
main.js:
import App from './App.vue'
import './assets/tailwind.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from 'router/router.js'
Vue.config.productionTip = false
Vue.use(VueRouter);
const app = new Vue({
render: h => h(App),
}).$mount('#app')
app.use(router);
router.js:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
This is my directory structure:
I get this error:
This dependency was not found:
* router/router.js in ./src/main.js
You have not imported the router correctly, it should be like this instead:
import router from './router/router.js'
Normally it should work now.
Edit:
Try making a new vue project with the router preset.
I change import to
import router from `./router/router.js
And also made new project with Vue 3 (was used Vue 2 for this one), where I installed vue-router#next. Then I followed this tutorial: https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
Changed main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'
createApp(App).use(router).mount('#app')
There is the second warning: warning in ./src/main.js "export
'default' (imported as 'Vue') was not found in 'vue'.
It's showing me blank site, something could be wrong with router and
here is script of my App.vue (not sure about this):
import router from '#/router'
export default{ }
And here is my index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next)=>{
next();
})
export default router
And main.js:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App)
}).$mount('#app')
I got same problem.this way can solve that.
import {createRouter, createWebHistory} from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes
})
I'm new in vue,i found it in sample of vue-router.
https://codesandbox.io/s/nested-views-vue-router-4-examples-hl326?initialpath=/users/eduardo&file=/src/router.js
If using Vue router 4, do this:
...
const router = VueRouter.createRouter({
...
Why wont my component load?
The root url
http://localhost:8080/
must just show Bar?
Thanks for the help
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home'
import Contact from '././components/Contact'
Vue.config.productionTip = false
Vue.use(VueRouter);
const Bar = { template: '<div>bar</div>' }
const routers = [
{ path: '/', component: Bar },
];
let router = new VueRouter({mode: 'history', routes: routers});
new Vue({
router
}).$mount('#app')
Possible reasons are
You didn't import router properly in your code
You don't Vue.use(VueRouter), just pass it to your new Vue object parameters
Correct it like so
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'router'
import Home from './components/Home'
import Contact from '././components/Contact'
Vue.config.productionTip = false
const Bar = { template: '<div>bar</div>' }
const routers = [
{ path: '/', component: Bar },
];
let router = new VueRouter({mode: 'history', routes: routers});
new Vue({
router
}).$mount('#app')
it should work if your App.vue (imported on line 2) has <router-view /> component in its template and all other imports are valid.
In bootstrap.js, I have this:
window.Vue = require('vue');
window.events = new Vue();
Now I would like to use vue-router as well purely to have access to this.$route. What is the easiest way to do this? I tried to follow the official documentation, but it's so much different than what comes with laravel:
const app = new Vue({
router
}).$mount('#app')
Thank you!
First install vue-router.
Then create a new file router.js in resources/assets/js and put this code in it.
import Router from 'vue-router'
Vue.use(Router)
/*
Make sure your pages components are inside `resources/assets/js/pages` folder
*/
const Home = require('./pages/Home.vue')
const Hello = require('./pages/Hello.vue')
const NotFound = require('./pages/NotFound.vue')
let router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}, {
path: '/hello',
name: 'hello',
component: Hello
}, {
path: '*',
component: NotFound
}, ]
})
export default router
Now go to app.js file and insert this code:
import Vue from 'vue'
import router from './router.js'
const app = new Vue({
el: '#app',
router, // Add this to your Vue instance
//...
})
Then create your pages (Home.vue, Hello.vue and NotFound.vue in this case).
in app.js
import VueRouter from 'vue-router';
window.Vue = require('vue');
window.Vue.use(VueRouter);
import router from './config/routes';
const app = new Vue({
el: '#app',
router,
});
you could extract the code for routes definition into ./config/routes.js, see below example:
import VueRouter from 'vue-router';
const routes = [
{path: '/', redirect: '/app/articles'},
...
];
const router = new VueRouter({routes});
export default router;
Here are steps to make laravel routes and vue routes work together:
1. define your vue layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>
2. define your laravel route to make vue-router handle url
Route::any('{all}', function(){
// welcome view should extend layout defined in step #1
return view('welcome');
})->where('all', '.*');
3. setup vue with vue-router
routes.js
import DashboardPage from './components/dashboard/dashboard.vue'
import SignupPage from './components/auth/signup.vue'
import SigninPage from './components/auth/signin.vue'
export const routes = [
{ path: '/signup', component: SignupPage },
{ path: '/signin', component: SigninPage },
{ path: '/dashboard', component: DashboardPage },
{ path: '*', redirec: '/' }
];
router.js
import VueRouter from 'vue-router';
import { routes } from './routes';
export const router = new VueRouter({
routes,
mode: 'history'
});
export default router
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import { router } from './router'
Vue.use(VueRouter);
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')
Well I'm facing a problem with importing multiple modules in ES6, using babel. I'm trying structure my app in Vue.js as a modular components (or in precise the structure that follows in Angular2 for features)
app/
moduleA/
components/
vuex/
index.js
routes.js
moduleB/
components/
vuex/
index.js
routes.js
index.js
routers.js
vuex.js
components.js
router/
vuex/
components/ -> shared
main.js
Now, my question is, how can I export and import all modules to work perfectly?
So let's say for the moduleA routes I've the following code
//moduleA/routes.js
export const routes = [
{ path: '', name: 'home', components: {
default: Home,
'header-top': Header
} }
];
And again for moduleB routes
//moduleA/routes.js
export const routes = [
{ path: '/user', components: {
default: User,
'header-bottom': Header
}, children: [
{ path: '', component: UserStart },
{ path: ':id', component: UserDetail },
{ path: ':id/edit', component: UserEdit, name: 'userEdit' }
] }
];
Then, how can I import and get this work. Please help.
Thanks
You'll need to tell the root router and root vuex where your modules are located.
So, bundle all your routes:
import { routes as moduleA } from './moduleA';
import { routes as moduleB } from './moduleB';
export default [ ...moduleA, ...moduleB, ];
Do the same for your vuex:
import { vuex from moduleA } from './moduleA';
import { vuex as moduleB } from './moduleB';
export default { moduleA, moduleB, };
Now, in your global vuex/:
import Vue from 'vue';
import Vuex from 'vuex';
import vuex from '../app';
export default new Vuex.Store({
modules: vuex,
});
And, for your router/:
import Vue from 'vue';
import Router from 'vue-router';
import { routers } from '../app';
Vue.use(Router);
export default new Router({
routes: routes,
});