将vitejs v2添加到Vue v3时路由器不工作

问题描述

一直使用 webpack 作为开发服务器的应用现在应该使用 vite。除了路线之外，一切似乎都运行良好（而且速度很快）。这些只是被忽略，只呈现 App.vue 的内容。

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

这是（始终显示）App.vue：

<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 的内容。

感谢指出我在这里缺少什么以及为什么忽略了精细路线。

解决方法

您需要添加一个路由器视图才能转到路由的页面。

如果你想让 SomePage 成为 App.vue 的一部分，就这样做

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

vitejs vue.js

将vitejs v2添加到Vue v3时路由器不工作

问题描述

解决方法

相关问答