文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue 3路由器不工作。我不明白为什么

问Vue 3路由器不工作。我不明白为什么
EN

Stack Overflow用户

提问于 2022-01-21 19:25:09

回答 1查看 661关注 0票数 0

我是vue的初学者(vue 3)。我正在测试一个模拟vue应用程序，在测试了默认主页之后，我想测试如何制作两个(或更多)不同的页面。然而，我所做的工作不起作用，即使我是遵循教程的信。

上下文

v2.7.2

vue-router v4.0.12
节点v17.3.0
vue v3.2.25

预期结果：在配置了2条路由之后，访问路由1将给我一个网页。进入2号路线给了我另一页。

当前结果：无论我尝试访问哪个路由/路径，都会出现默认/初始页面(初始化const app = createApp(App)时使用的"App“页面)。我的第二页从未显示过。没有显示错误。

项目结构

/src
  |- main.js
  |- components/
  |- router/
      |- router.js
  |- views/
      |- App.vue
      |- App2.vue

main.js

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

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

router.js：

import { createWebHistory, createRouter} from 'vue-router'
import App from '../views/App.vue'
import App2 from '../views/App2.vue'

const routes = [
  {
    path: '/',
    component: App
  },
  {
    path: '/toto',
    component: App2
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

App.vue和App2.vue是内容明显不同的vue文件。

App.vue

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

<template>
  <div id="nav">
    <router-link to="/"> Home </router-link>|
    <router-link to="/toto"> Toto </router-link>
  </div>
  <img alt="Vue logo" src="../assets/logo.png" />
  <HelloWorld msg="Trying to make router work" />
</template>

(我省略了我认为与问题无关的css代码)

问题

当我访问localhost:3000时，我得到了App.vue.

When i访问本地主机的内容:3000/toto，我得到了App.vue.

When i访问本地主机的内容:3000/不管(不存在的路由)，我得到了App.vue.

的内容。

我找不到我做错了什么。

(如果有用)：vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

vue.js

vue-router

vuejs3

javascript

node.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-21 20:05:58

添加将包含路由组件的router-view组件的缺失：

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

<template>
  <div id="nav">
    <router-link to="/"> Home </router-link>|
    <router-link to="/toto"> Toto </router-link>
  </div>
  <img alt="Vue logo" src="../assets/logo.png" />
  <HelloWorld msg="Trying to make router work" />
  <router-view></router-view>
</template>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70806649

复制

相似问题

问Vue 3路由器不工作。我不明白为什么
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue 3路由器不工作。我不明白为什么EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue 3路由器不工作。我不明白为什么
EN