Question

我有一系列产品，并且我试图以一种让我直接向某人发送产品链接的方式来设置我的应用。当您尝试直接导航到产品时，一切正常，但是，如果直接打开相同的URL（而不在应用中进行导航），则无法正常工作。

问题出在单个项目视图中未定义的subcategoryItems

路由器摘要：

{
      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: ''
    }
  }
};

单个项目视图：

<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>

Json示例：

[
    {
        "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."
            }
        ]
    }  
]

谢谢

Answer 1

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

https://router.vuejs.org/guide/essentials/history-mode.html

Answer 2

如果您查看我发布的代码，则问题是我在最终产品页面的URL中遗漏了一段信息。当我浏览该应用程序时，产品信息就在那里，但是在重新加载时，它不再与路线匹配，因此详细信息消失了。

直接导航到页面时，Vue URL不起作用

2 个答案: