routers and components in vue.js

Question

My component information is not displayed!!! the router is working great and I test it to many times but there is nothing in components when I run the project. They all seem to have nothing in them buy I put lot`s of things in them.

I working with vue.js 2

and I have an error in console "You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."

app.vue:

 <template>
      <div>
          <router-link to="/">app</router-link>
        <router-link to="/RoutOne">RoutOne</router-link>
        <router-link to="/RoutTwo">RoutTwo</router-link>
        <router-link to="/RoutThree">RoutThree</router-link>
     <router-view></router-view>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {};
      },
      methods: {},
    };

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import RoutOne from "./router/RoutOne.vue";
import RoutTwo from "./router/RoutTwo.vue";
import RoutThree from "./router/RoutThree.vue";

Vue.use(VueRouter)

const routes = [
    { path: "/", component: App },
    { path: "/RoutOne", component: RoutOne },
    { path: "/RoutTwo", component: RoutTwo },
    { path: "/RoutThree", component: RoutThree },
]

const app = new Vue({
    router: new VueRouter({
        routes
    }),
    component: app
}).$mount('#app')

component one:

<template>
    <div >
    <h1>someone you loved</h1>

<title></title>

<button>nothing</button>

<input disabled placeholder="nothing"/>

</div>
</template>

<script>
    export default {
    }
</script>

<style scoped>

</style>

component two:

<template>
    <div >
    <h1>loving you is a losing game</h1>
    <h2>the title is : {{title}}</h2>
</div>
</template>

<script>
    export default {
    }
</script>

<style scoped>

</style>

component three:

<template>
<div >
    <h1>and way down we go</h1>
    <b-alert>wrong side</b-alert>
</div>
</template>



<script>
    export default {
    }
</script>

<style scoped>

</style>

Answer 1

Just add mode: 'history' to your router, by default vue-router use hash mode, it uses a hash character (#) before the actual URL is internally passed.

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import RoutOne from "./router/RoutOne.vue";
import RoutTwo from "./router/RoutTwo.vue";
import RoutThree from "./router/RoutThree.vue";

Vue.use(VueRouter)

const routes = [
    { path: "/", component: App },
    { path: "/RoutOne", component: RoutOne },
    { path: "/RoutTwo", component: RoutTwo },
    { path: "/RoutThree", component: RoutThree },
]

const app = new Vue({
    router: new VueRouter({
        mode: "history",
        routes,
    }),
    component: app
}).$mount('#app')