Vue.js Vue URL'；直接导航到页面时，它不工作

我有一系列的产品，我正在尝试设置我的应用程序，让我直接向某人发送一个产品链接。 当您尝试直接导航到某个产品时，一切都正常，但如果您直接打开同一个url（而不通过应用程序导航），则无法正常工作

该问题来自“单个项目”视图中未定义的子类别项目

路由器代码段：

{
      path: '/categories',
      name: 'categories',
      components: { default: Categories, header: StarterNavbar, footer: StarterFooter },
      props: {
        header: { colorOnScroll: 400 },
        footer: { backgroundColor: 'black' }
      }
    },
    {
      path: '/categories/:catname',
      name: 'products',
      components: { default: Products, header: StarterNavbar, footer: StarterFooter },
      props: {
        header: { colorOnScroll: 400 },
        footer: { backgroundColor: 'black' }
      }
    },
    {
      path: '/categories/:catname/:productname',
      name: 'singleproduct',
      components: { default: SingleProduct, header: StarterNavbar, footer: StarterFooter },
      props: {
        header: { colorOnScroll: 400 },
        footer: { backgroundColor: 'black' }
      }
    },

产品视图

<template>
  <div class="">
    <section class="subcategory-container" v-for="(category, index) in subcats" v-bind:key="index">
      <h2>{{category.subcategoryTitle}}</h2>

      <card class="card-shell" v-for="(product, index) in category.subcategoryItems" v-bind:key="index">
        <div class="image-container">
          <img slot="image" class="card-img-top" :src="product.image" alt="Card image cap">
        </div>

        <div>
          <h4 class="card-title">{{product.title}}</h4>
          <p class="card-text">{{product.sku}}</p>
         <div>

          <router-link :to="{ name: 'singleproduct', params: { productname: product.title, subcatTitle: category.subcategoryTitle } }" class="text-white">
              <n-button type="primary">{{buttonText}}</n-button>
          </router-link>

      </div>
        </div>
      </card>
    </section>
  </div>

</template>

<script>
import { Card, Button, Modal } from '@/components';
import axios from 'axios'
export default {
  name: 'products',
  components: {
    Card,
    Modal,
    [Button.name]: Button
  },
  async created() {
    const url = this.$route.params.catname;
    try {
      const res = await axios.get(`/products/${url}.json`);
      this.subcats = res.data;
      this.catname = url;
    } catch (e) {
      console.log(e);
    }
  },
  data() {
    return {
        subcats: [],
        modals: {
          classic: false
        },
        showModal(product) {
          this.modals.classic = true;
          this.selectedItem = product;
        },
        buttonText: "Product Info",
        selectedItem: '',
        catname: ''
    }
  }
};

---

谢谢

这需要在路由器中启用历史记录模式。路由器文档对此有解释和示例：

---

这需要在路由器中启用历史模式。路由器文档对此有解释和示例：

---

如果您查看我发布的代码，问题是我在最终产品页面的URL中缺少了一个slug。

---

当我通过应用程序导航到那里时，产品信息都在那里，但在重新加载时，它与路线不再匹配，因此详细信息消失了。

如果你看我发布的代码，问题是我在最终产品页面的URL中缺少一个slug。

---

当我通过应用程序导航到那里时，产品信息都在那里，但在重新加载时，它与路线不再匹配，因此详细信息消失。

将其更改为历史记录模式没有任何效果。我尝试更改url段塞，使其与其他任何内容都不匹配。没用。我试着改变路线的顺序。我尝试将变量名更改为与任何其他页面的名称不匹配。仍然有相同的结果。在最终的产品页面上，当我重新加载时，类别名称从路由参数中消失，而将其切换到历史模式的页面断开没有任何作用。我尝试更改url段塞，以便它不会与其他任何url段塞匹配。没用。我试着改变路线的顺序。我尝试将变量名更改为与任何其他页面的名称不匹配。仍然有相同的结果。在最终产品页面上，当我重新加载时，类别名称从route params中消失，并且分页符该答案不是答案，您可以发布原始问题的更正代码吗？该答案不是答案，您可以发布原始问题的更正代码吗？

<template>
 <card class="card-nav-tabs text-center" header-classes="card-header-warning">
   <div slot="header" class="mt-2">
     <img src="" alt="">
   </div>
   <h4 class="card-title">{{product.title}}</h4>
   <p class="card-text">{{product.description}}</p>
   <div slot="footer" class="card-footer text-muted mb-2">
     {{product.sku}}
   </div>
  </card>
</template>

<script>

import { Card, Button } from '@/components';
import axios from 'axios';
import { async } from 'q';

 export default {
     name: 'singleproduct',
     components: {
         Card,
         [Button.name]: Button
     },
      async created() {
           const { catname, productname, subcatTitle } = this.$route.params;
           //console.log(this.$route.params)
           try {
               const res = await axios.get(`/products/${catname}.json`);
               const data = res.data;
               const items = data.find(product => product.subcategoryTitle === subcatTitle).subcategoryItems;
               const item = items.find(item => item.title === productname);
               console.log(item);
               this.product = item;
           } catch (e) {
               console.log(e);
           }
     },
     data () {
         return {
            product: []
         }
     }

 }
</script>

[
    {
        "subcategoryTitle": "sub cat title 1",
        "subcategoryItems": [
            {
                "id": 1,
                "title": "name 1",
                "sku": "sku 1",
                "image": "img/path to image",
                "description": "Cream beans medium rich breve cinnamon latte. White pumpkin spice kopi-luwak sugar foam frappuccino dark. Brewed arabica, dripper arabica as milk turkish medium."
            }
        ]
    },
    {
        "subcategoryTitle": "sub cat title 2",
        "subcategoryItems": [
            {
                "id": 1,
                "title": "name 2",
                "sku": "sku 2",
                "image": "img/path to image"
                "description": "Cream beans medium rich breve cinnamon latte. White pumpkin spice kopi-luwak sugar foam frappuccino dark. Brewed arabica, dripper arabica as milk turkish medium."
            },
            {
                "id": 2,
                "title": "name 2",
                "sku": "sku 2",
                "image": "img/path to image",
                "description": "Cream beans medium rich breve cinnamon latte. White pumpkin spice kopi-luwak sugar foam frappuccino dark. Brewed arabica, dripper arabica as milk turkish medium."
            }
        ]
    }  
]