'How to use routing in vue js?
I am working on a vue js project, to use the router , I installed via command -> npm install vue-router and created a router.js file , but when i try , npm run serve, i get compile warnings and the app doesn't work as intended.
Error
warning in ./src/router.js
export 'default' (imported as 'Router') was not found in 'vue-router' ( possible exports: NavigationFailureType, RouterLink ....)
Directory Structure
vuejsproj
> node_modules
> public
> src
> assets
> components
App.vue
main.js
router.js
...
router.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/",
alias: "/list",
name: "list",
component: () => import("./components/somecomponent")
}
]
});
main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts":{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.27.2",
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-axios": "^3.4.1",
"vue-router": "^4.015",
"vuetify": "^2.6.0"
},
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|