首页 > 解决方案 > 在 Vue 中传递 SEO 友好的标题而不是 ID 号

问题描述

我正在使用vuejswithvue router并且我正在使用axios基于我在 router/index.js 文件中设置的路由向 API 发出 get 请求。

但是我想传递 SEO 友好的标题而不是 id。

myname/products/bears代替myname/products/1

路线

   {
        path: '/products/:id',
        name: 'productDetail',
        props: true,
        component: function () {
            return import('../views/products/mycomponent')
        }
    },

方法

getProduct(){
            var itemId = this.$route.params.id;
            //return console.log(itemId)
            axios
            .get('http://localhost:3000/products/'+itemId)
            .then(response => (
                this.server = response.data
            ))
        },

标签: vue.js

解决方案


要回答您的问题,我相信这更多的是数据问题?如果您的 id 是bears,它将按您的意愿工作。如果您提供名称的字段bears也是唯一的,您可以使用它代替 url 中的 id。

附带说明:VueJS 本身不能提供对 SEO 友好的元数据,您可能需要考虑使用 Gridsome 或 Nuxt 之类的东西。


推荐阅读