I have been delving into Vue. Through the npm install vue-router command, I added vue-router to my project. Subsequently, I incorporated VueRouter and defined my URL paths within the VueRouter instances located in the main.js file. I created an About component and utilized it within the app.vue file. However, I encountered an issue where the route did not function properly when accessed via http://localhost:8080/about/#/ or http://localhost:8080/#/about. I attempted to eliminate the # tag from the URL as a troubleshooting measure. Below is the source code:
Main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import About from './components/About';
Vue.use(VueRouter);
const route = [
{path:'/about',component: About}
];
const router = new VueRouter({
route
});
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router: router,
}).$mount('#app')
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</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;
}
</style>
About.vue
<template>
<div id="about">
<h3>About Page</h3>
</div>
</template>
<script>
export default{
name: 'About'
}
</script>
Package.json
"dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "vue-router": "^3.5.2" },