Level 102
Seems like you might be using the old api. Check this tutorial https://vueschool.io/articles/vuejs-tutorials/how-to-use-vue-router-a-complete-tutorial/
Jan 6, 2023
11
Level 4
export 'default' (imported as 'Router') was not found in 'vue-router'
work with vue and Laravel. when I run npm run watch it is occured following error message on my console.
export 'default' (imported as 'Router') was not found in 'vue-router'
My router.js file is
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import firstPage from './components/pages/myFirstVuePage.vue'
import newRoutePage from './components/pages/newRoutePage.vue'
const routes = [
{
path: '/my-new-vue-route',
component: firstPage
},
{
path: '/new-route',
component: newRoutePage
},
]
export default new Router({
mode: 'history',
routes
})
and app.js
require('./bootstrap');
window.Vue = require('vue')
import router from './router'
Vue.component('mainapp', require('./components/mainapp.vue').dafault)
const app = new Vue({
el: '#app',
router
//store
})
and package.json is
"dependencies": {
"vue": "^3.2.45",
"vue-router": "^4.0.13"
}
how could I fix this problem?
Level 4
@Sinnbeck not met fine answer here
Level 102
@Flex what? You didnt find the anwer in the tutorial? Or you tried it and got a new error? Or you cannot read the tutorial as you cannot read english? Or it was solved?
Level 4
@Sinnbeck i did it but not success?
Level 102
@Flex Sorry but I am unable to see your screen.. I have no way of knowing what error you are getting, or how your code looks.
Level 4
@Sinnbeck same error here I think problem is in the route.js this is not plain vue project it is in the Laravel+ vue project
Level 102
@Flex How can you get the same error? The guide tells you to import this
import { createRouter, createWebHistory } from 'vue-router'
//and then do
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
But perhaps you should concider using inertia instead. Then you can use laravels routes. https://inertiajs.com/
Level 4
@Sinnbeck okay then how could I manage following routes in router.js
{
path: '/my-new-vue-route',
component: firstPage
},
{
path: '/new-route',
component: newRoutePage
},
Level 102
@Flex Maybe just show what you have? Should be pretty clear in the tutorial
Level 10
Hello there! your router use should be a bit differently initialised.
this is just a workaround up on your files - didn't check this properly, but the main point is on Vue 3 initialisation (and vue-router). It should work with smth like this...
router.js
import firstPage from './components/pages/myFirstVuePage.vue';
import newRoutePage from './components/pages/newRoutePage.vue';
import { createRouter, createWebHistory } from "vue-router";
const ROUTES = {
MyNewVueRoute: {
path: '/my-new-vue-route',
name: 'MyNewVueRoute',
component: firstPage
},
NewRoutePage: {
path: '/new-route-page',
name: 'NewRoutePage',
component: newRoutePage
}
}
const router = createRouter({
history: createWebHistory(),
routes: [
// feel free to add more routes here (yeah, and your root '/' route too :) )
{
path: ROUTES.MyNewVueRoute.path,
name: ROUTES.MyNewVueRoute.name,
component: ROUTES.MyNewVueRoute.component
},
{
path: ROUTES.NewRoutePage.path,
name: ROUTES.NewRoutePage.name,
component: ROUTES.NewRoutePage.component
},
]
});
export default router;
as for the app.js
require('./bootstrap');
window.Vue = require('vue');
import router from './router';
import App from './App.vue'; // your main app component
Vue.component('mainapp', require('./components/mainapp.vue').dafault)
const app = createApp(App);
app.use(router);
app.mount('#app');
Level 1
You must install the following version of vue-router with npm.
npm install vue-router@next --save
The configuration of the other comments is correct.
Please or to participate in this conversation.