I recently began working on a new Vue.js project after a long break from using it, and I noticed some significant changes. I attempted to add a route in my src/router/index.ts file (shown below), but when I visited localhost:8080 to see my beautiful HelloWorld.vue component, I was greeted with the content of my Simulator.vue, displaying "Yooood."
How is this possible? The base path of my app accessed via "/" should display the HelloWorld.vue component with only a "Hello World" text...
When trying to access /simulator using a
<router-link to="/simulator">Go to Simulator</router-link>I am quite confused. Below are my files.
router/index.ts
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import Simulator from "@/components/Simulator.vue";
import HelloWorld from "@/components/HelloWorld.vue";
Vue.use(VueRouter);
const routes: Array<RouteConfig> = [
{
path: '/',
name: 'Home',
component: HelloWorld
},
{
path: '/simulator',
name: 'Simulator',
component: Simulator
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
This is my Simulator.vue:
<template>
<div class="hello">
Yooood
</div>
</template>
<script lang="ts">
import {Vue} from "vue-property-decorator";
export default class Simulator extends Vue {
mounted() {
console.log('mounted');
}
}
</script>
<style scoped>
</style>
And here is my HelloWorld.vue
<template>
<p>
Hello World
</p>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Lastly, my App.vue
<template>
<div id="app">
</div>
</template>
<script lang="ts">
import {Vue } from 'vue-property-decorator';
export default class App extends Vue {}
</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>