begginer ask for help

[fkwwyy]

Sorry guys, I've tried and failed to solve the problem with AI and search engines.Here is a demo, just for practice.

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

// 配置信息中需要页面的相关配置

const routes = [
    {
        path: "/",
        component: HomeView
    },
    {
        path: "/about",
        component: AboutView
    }
]

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

export default router;

// src/views/HomeView.vue 
<template>
    <h3>首页</h3>
</template>
// src/views/AboutView.vue
<template>
    <h3>关于页面</h3>
</template>

// App.vue
<template>
  <!-- 路由的显示入口 -->
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
}
</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>

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

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

// package.json
{
  "name": "vue-router-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-service": "~5.0.0"
  }
}
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

npm run serve success. I can see the HelloWorld page without modification.
Now when I visit http://localhost:8080/#/ and http://localhost:8080/#/about, all I can see is a blank, there is no error message in the console, I don't know where the error is, please help me, thank you

[fkwwyy]

@vue/cli 5.0.8 and console warning :main.js:6 Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.
is the reason?
npm is 10.9.1
nodejs is v22.11.0
windows 22H2 19045.5131

[fkwwyy]

The phenomenon observed so far indicates that the router-link label is valid, but the router-view cannot render the corresponding component
目前观察到的现象，可以确定router-link标签是有效的，但是router-view无法渲染对应的组件

[fkwwyy]

目前观察到的现象，可以确定router-link标签是有效的，但是router-view无法渲染对应的组件.
The phenomenon observed so far indicates that the router-link label is valid, but the router-view cannot render the corresponding component

[fkwwyy]

create vue vue-router-demo
chose manually select features
chose Babel Progressive Web App (PWA) Support, no chose Linter / Formatter
vue3.x
In dedicated config files
create done I install vue-router: cnpm install --save vue-router

[fkwwyy]

At present, the latest situation is that if the vue-router library is selected when creating a new project, the jump can be correct. Does it mean that there is a problem with the vue-router installed by cnpm?
目前最新的情况是，新创建项目时如果选择了vue-router库，是可以正确的跳转的，是否意味着cnpm安装的vue-router存在问题？

[fkwwyy]

大致找到原因了，能正常运行的vue-router版本是4.0.3，而无法正常运行的版本是4.5.0，我想这版本差距有点大，而且包管理器也没有错误提示，为什么vue cli使用如此低的版本？
Roughly found the reason, the normal version of the VUe-router is 4.0.3, and the version that does not work properly is 4.5.0, I think the version gap is a little big, and the package manager has no error message, why the vue cli uses such a low version?

[Deckluhm]

why the vue cli uses such a low version?

Vue CLI is in maintenance mode and the official Vue guide now suggests using create-vue instead:

• Vue guide: https://vuejs.org/guide/quick-start
• create-vue GitHub: https://github.com/vuejs/create-vue

Since your project is (for now) pretty basic, I suggest recreating it using create-vue.