-1

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

路由器/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')

应用程序.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>

主页.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>
4

1 回答 1

0

只需在此处编写解决方案即可结束此问题：

将代码发布到您的链接 - 您是使用组件还是以编程方式生成它？

Tremendus 应用程序

@TremendusApps 哦，我现在明白了，谢谢...问题是我通过空 id 来获取没有 id 的下载，但这显然不起作用...无论如何感谢您的时间：D

我

于 2022-01-17T19:46:30.840 回答