访问子路由组件Vue 2时可选的路由参数丢失答案

【问题标题】：Optional route params lost when access child route components Vue 2访问子路由组件Vue 2时可选的路由参数丢失
【发布时间】：2021-06-03 18:44:03
【问题描述】：

我遇到了可选路由参数的问题，当我访问子组件时，该路由参数 (id) 丢失了

这是我在路由器上的路由配置

{
  path: "route/:id?",
  component: () => import("*****"),
  props: true,
  children: [
    {
      path: "/",
      redirect: { name: "*****" }
    },
    {
      path: "information",
      component: () => import("****")
    },
  ]
},

这是我预期的路线companies/1/description 等

我的代码有问题吗？

这就是我推送路由器的方式

它显示像companies/1/information 这样的成功，但如果我通过另一个子路线.. 这个参数会像companies/direction 一样丢失

【问题讨论】：

你能链接到一个复制品吗？如果从 URL 中省略 ID，那么它应该是什么？当您“访问子组件”时，您尝试的是什么 URL？
嗨@tony19 更新问题
您似乎不小心删除了您问题中的大部分信息。我为你解开了那个。

标签： vue.js vue-router

【解决方案1】：

如果我理解正确，您希望 <router-link> 放置在您的 Company 组件中以某种方式自动从当前路由“继承”路由参数。

不幸的是，使用可选参数不是这样工作的 - 它可以使用非可选参数，但可选参数必须显式传递......

:to="{ name: link.routeName, params: { id: $route.params.id } }"

const companies = Vue.component('companies', {
  template: `
  <div id="app">
    <router-link to="/companies/1">Company 1</router-link>
    <router-link to="/companies/2">Company 2</router-link>

    <router-view></router-view>
  </div>
  `
})

const company = Vue.component('company', {
  props: ['id'],
  template: `
  <div id="app">
    <h4> {{ id }} </h4>
    <h4> {{ $route.fullPath }} </h4>
    <router-link :to="{ name: 'adminBusinessProfileInformation', params: { id: $route.params.id } }">Information</router-link>
    <router-link :to="{ name: 'adminBusinessProfileDescription', params: { id: $route.params.id } }">Description</router-link>

    <router-view></router-view>
  </div>
  `
})

const child = Vue.component('child', {
  template: `
  <div>
    Child component
  </div>
  `
})

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/',
      redirect: 'companies'
    },
    {
      name: 'companies',
      path: '/companies',
      component: companies
    },
    {
      path: '/companies/:id',
      component: company,
      props: true,
      children: [{
          path: "/",
          redirect: {
            name: "adminBusinessProfileInformation"
          }
        },
        {
          path: "information",
          component: child,
          name: "adminBusinessProfileInformation"
        },
        {
          path: "description",
          component: child,
          name: "adminBusinessProfileDescription"
        }
      ]
    }
  ]
})

new Vue({
  el: '#app',
  router,
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-link to="/companies/1">Company 1</router-link>
  <router-link to="/companies/2">Company 2</router-link>

  <router-view></router-view>
</div>

【讨论】：