将参数添加到一条路线后，所有其他路线都停止工作

Question

将参数添加到路由之一后，所有其他路由都停止正确渲染（即路由器视图根本不工作）。路线 /download/:id 按预期工作...我是否在设置中遗漏了什么？我尝试在没有参数的情况下离开并删除 /download 路径，但它没有任何改变......我也尝试浏览文档，但我找不到他们遇到这种情况的示例（要么像这样工作，要么更频繁地工作他们在示例中只使用了一条路线）

router/index.ts:

import About from '@/views/About.vue'
import Downloads from '@/views/Downloads.vue'
import Home from '@/views/Home.vue'
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  {
    path: '/download',
    name: 'Downloads',
    component: Downloads
  },
  {
    path: '/download/:id',
    name: 'Downloads',
    component: Downloads
  }
]

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

export default router

main.ts:

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

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

App.vue:

<script setup lang="ts">
import * as themeJson from '@/assets/theme.json';
import Menu from '@/components/Menu.vue';
import {
NConfigProvider,
NLayout,
NLayoutContent,
NLayoutHeader
} from 'naive-ui';
import 'vfonts/FiraSans.css';
</script>

<template>
  <NConfigProvider :theme-overrides="themeJson">
    <NLayout>
      <NLayoutHeader class="header">
        <Menu />
      </NLayoutHeader>
      <NLayoutContent class="content">
        <router-view />
      </NLayoutContent>
    </NLayout>
  </NConfigProvider>
</template>

Home.vue:

<script setup lang="ts">
  import logo from '@/assets/logo.svg';
import { NButton, NH1 } from 'naive-ui';
</script>

<template>
  <div class="hero">
    <img :src="logo" alt="gbl portal logo" class="hero-logo" />
    <NH1 class="hero-title">GBL Portal</NH1>
    <div class="hero-quick-actions">
      <router-link :to="{ name: 'Downloads', params: {id: 'a152b'}}">
        <NButton type="primary" size="large">Downloads</NButton>
      </router-link>
      <router-link :to="{ name: 'About' }">
        <NButton size="large">About</NButton>
      </router-link>
    </div>
  </div>
</template>

Answer 1

在这里写下解决方案来结束这个问题：

Post the code to your link - do you generate this with component or programatically?

Tremendus Apps

@TremendusApps Oh, I see it now, thanks... The problem is I passed empty id to get downloads without id, but that clearly is not working... anyway thanks for your time :D

me

将参数添加到一条路线后，所有其他路线都停止工作

After adding params to one route all other stop working

typescript

vue.js

vue-router

vuejs3

vue-router4