vue.js 中的路由器和组件

Question

我的组件信息不显示！！！ 路由器运行良好，我对其进行了多次测试，但是当我运行项目时，组件中没有任何内容。 他们似乎什么都没有买我在里面放了很多东西。

我使用 vue.js 2

并且我在控制台中出现错误“您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译为渲染函数，要么使用包含编译器的构建。”

应用程序.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: {},
    };

主.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')

组件一：

<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>

组件二：

<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>

组成部分三：

<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

只需将 mode: 'history' 添加到您的路由器，默认情况下 vue-router 使用哈希模式，它在内部传递实际 URL 之前使用哈希字符 (#)。

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')