如何使用 Vuejs 插入 url [英] How to slug an url using Vuejs

问题描述

我正在建立一个包含多篇文章的网站.我正在使用 Vue Router，目前我的文章的 url 看起来像/article/id，例如:http://localhost:8080/article/85.

I'm building a website with several articles. I'm using Vue Router, and for the moment the urls of my articles look like /article/id, for example : http://localhost:8080/article/85.

如何将带有文章标题的 URL 插入到例如 http://localhost:8080/article/the-article-title 中?

How can I slug an URL with the article title so it can be http://localhost:8080/article/the-article-title for example ?

我不知道我应该提供什么样的代码，所以这是我的文章路线:

I have no idea what kind of code should I provide so here is my article route :

routes: [
 {
   path: '/article/:id',
   component: require('../components/articlePage.vue').default,
   name: 'article',
   meta: {title: "article"}
  }, 
]

推荐答案

随着复杂性和处理方面的增加，有不同的方法.

There are different approaches with increasing level of complexity and aspects taken care of.

所以首先 - 为了slug-ify 文章，您必须将 slugs 引入应用程序.由于在评论中提到所有文章都是事先获取的，因此可以将 slug 添加到每篇文章数据中，然后再保存它们以使用将单词转换为 kebab-case 或帮助程序库之一的自定义函数进行存储(例如 dashify).

So to start - in order to slug-ify articles, you have to introduce slugs to the application. Since it is mentioned in comments that all articles are fetched priorly, slugs can be added to each article data before saving them to store with custom function that converts words to kebab-case or one of helper libraries (e.g. dashify).

这将使使用 :slug 作为路由 param 而不是 id 来呈现文章链接列表成为可能，并在商店中搜索 byparam 在渲染文章页面之前.好消息是，通过扩展逻辑以按 2 个字段进行搜索，仍然可以保持两个选项(slug 和 id)可用.

This will make possible to render list of article links using :slug as route param, instead of id and search in store for by param before rendering article page. Good thing is that it still possible to keep both options (slug and id) available by extending logic to search by 2 fields.

取决于您的目标 - 可能就是这样.但是如果文章标题已更改并且用户通过外部保存的链接(在社交媒体中共享，由搜索引擎索引等)访问文章，则会出现问题.这打败了 SEO.

Depending on your target - that might be it. But the problem arises in case article title has been changed and user accesses article via externally saved link (shared in social media, indexed by search engines, etc). This defeats SEO.

为了保持文章的可访问性，在后端包含 slug 作为必填字段是一个很好的做法.仍然可以使用相同的方法生成 Slug，但在 CMS 中 - 在文章存储在数据库中之前.在这种情况下，它可以进行双重检查、手动编辑(因为由于字符长度、特殊符号等原因，slug 并不总是代表完整的文章标题)并且可以进行查询，从而消除前端应用程序中字符串操作的麻烦.

In order to keep article accessible, it is a good practice to include slug as a required field on the back-end. Slug still can be generated with same approach, but in CMS - before article is stored in the database. In such case it can be double checked, manually edited (as slugs do not always represent full article title because of characters length, special symbols, etc) and be accessible for querying, thus removing hassle of string manipulation from the front-end application.

此外，这还创建了用于配置 301 重定向 的选项，以在 slug 之后保留索引 通过保存旧的 slug 来改变.但是这样的问题超出了当前问题的范围，尽管这是一个很好的做法.

Also this creates options to configure 301 redirects to preserve indexation even after slug is changed by saving old slugs. But such problem is out of the scope of the current question, even though is a good practice.

这篇关于如何使用 Vuejs 插入 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！