When setting up a Vanilla Vue CLI installation, I encountered some issues with getting the Vue router to work properly. Despite following the online documentation and forum discussions, I couldn't resolve the error message "Uncaught ReferenceError: router is not defined".
In my attempts to import the Vue router, I used the official method as described in the documentation -
import VueRouter from 'vue-router'Vue.use(VueRouter).
However, even after adding the router object, I continued to encounter errors, resulting in a "TypeError: Cannot read property 'resolve' of undefined" message during rendering.
// main.js
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//import axios from 'axios'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.config.productionTip = false
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(faUserSecret)
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{ path: '/', component: () => import('./views/Home.vue') },
// { path: '/login', component: Login },
// { path: '/about', component: About }
]
})
new Vue({
render: h => h(App),
}).$mount('#app')
// App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/groups">Events Near Me</router-link>
</div>
<img alt="Vue logo" src="./assets/logo.png">
</div>
</template>
<script>
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
This issue highlights the challenges of troubleshooting common setup problems when working with Vue router and implementing it within a Vanilla Vue CLI environment.