如何在 Vue.js 中使用路由（打字稿）

Question

我刚开始一个新项目Vue.js，好久没用了，变化很大。 试图在我的src/router/index.ts中添加一条路由（如下所示），我将 go 到 localhost:8080 以查看我漂亮的Helloworld.vue组件，我看到Simulator.vue的内容是“Yooood”。

怎么可能？ 由于我的应用程序通过“/”访问的基本路径是 HelloWorld.vue 组件，只有一个“Hello World”文本......

当我尝试使用<router-link to="/simulator">Go to Simulator</router-link>访问/simulator时，我得到了相同的内容...

我有点困惑....这是我下面的文件。

路由器/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

所以这是我的 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>

还有我的 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>

我的应用程序.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>

Answer 1

您缺少路由器视图组件。 根据 vue-router文档，

<router-view>组件是一个功能组件，它为给定路径渲染匹配的组件

APP.vue

 <template> <div id="app"> <router-view></router-view> // add router view component </div> </template>