Маршрутизатор не работает при добавлении vitejs v2 в Vue v3

Приложение, которое использовало webpack для сервера разработки теперь следует использовать vite. Кажется, все работает нормально (и быстро), за исключением маршрутов. Они просто игнорируются, и отображается только содержимое.

Это package.json:

      {
  "name": "mode",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "vue": "^3.0.5",
    "vue-router": "^4.0.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.1.4",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.0.2",
    "typescript": "~3.9.3"
  }
}

Центральный index.html является:

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

В src/main.ts то router загружено:

      import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

Этот маршрутизатор определен в src/router/index.ts:

      import { createRouter, createWebHistory } from 'vue-router'
import SomePage from '@/views/SomePage.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [{
      path: '/some',
      name: 'Some',
      component: SomePage
  }]
})

export default router

(Не показан) src/views/SomePage.vue является:

      <template>
  <div class="section">
    Some content on some page.
  </div>
</template>

И это (всегда отображается):

      <template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

С этим src/components/HelloWorld.vue:

      <template>
  <h1>{{ msg }}</h1>
  <p>
    Fancy text.
  </p>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  msg: String
})
</script>

Я ожидал, что http: // localhost: 3000 / some покажет содержимое SomePage.vue, но только содержание App.vue отображается независимо от используемого маршрута.

Указатели на то, что мне здесь не хватает и почему игнорируется точный маршрут, приветствуются.

Источник

1 ответ

Вам нужно добавить маршрутизатор-представление, чтобы перейти на маршрутизируемую страницу.

Если вы хотите, чтобы SomePage был частью App.vue, просто сделайте это,

      <template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>
Источник
Другие вопросы по тегам