Как использовать маршруты в Vue. js (машинописный текст) - PullRequest
Новая
       38

Как использовать маршруты в Vue. js (машинописный текст)

0 голосов
/ 03 августа 2020

Я только начал новый проект с Vue. js, долгое время не использовал, он сильно изменился. Пытался добавить маршрут в моем src/router/index.ts (показано ниже), i go to localhost: 8080, чтобы увидеть мой красивый Helloworld.vue компонент, и я вижу содержимое моего Simulator.vue, которое является «Yooood».

Как такое возможно? Поскольку базовый путь моего приложения, доступ к которому осуществляется с помощью «/», является компонентом HelloWorld. vue, только с текстом «Hello World» ...

Когда я пытаюсь получить доступ к /simulator с помощью <router-link to="/simulator">Go to Simulator</router-link> У меня такой же контент ...

Я немного запутался .... Это мои файлы ниже.

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

Итак, это мой симулятор. 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>

1 Ответ

2 голосов
/ 03 августа 2020

Вам не хватает компонента просмотра маршрутизатора. Согласно документации vue -router ,

Компонент <router-view> является функциональным компонентом, который отображает согласованный компонент для заданного пути

ПРИЛОЖ. vue

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