After adding params to one route all other stop working

Question

after adding parameter to one of the route all other stop rendering correctly (ie. router-view not working at all). Route /download/:id works as expected... Am I missing something in setup? I tried having leaving and removing the /download path without parameter and it changed nothing... Also I tried going through documentation, but I couldn't find example where they had this situation (either it worked like this or more often they used only one route in the example)

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>

Post the code to your link - do you generate this with component or programatically? — Tremendus Apps, Jan 17 '22 at 19:28
@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 — Tomkys, Jan 17 '22 at 19:46

score 0 · Accepted Answer · answered Jan 17 '22 at 19:46

Just writing the solution here to close this question:

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

1 Answers1