时间戳

首页 > 解决方案 > 如何使用 Vuejs 处理 url

vue.js - 如何使用 Vuejs 处理 url

问题描述

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

http://localhost:8080/article/the-article-title我怎样才能用文章标题 slug 一个 URL，例如它可以是？

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

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

标签： vue.jsvue-router

解决方案

有不同的方法，随着复杂程度的增加和需要处理的方面的增加。

所以要开始 - 为了slug-ify 文章，你必须在应用程序中引入 slugs。由于在评论中提到所有文章都是先获取的，因此可以将 slugs 添加到每篇文章数据中，然后再使用将单词转换为 kebab-case 或辅助库之一（例如dashify）的自定义函数来存储它们。

这将使得使用:slugas route渲染文章链接列表成为可能param，而不是在渲染文章页面之前id在 store 中搜索 by 。好消息是，通过将逻辑扩展为按 2 个字段进行搜索，param仍然可以保持两个选项 (slug和) 可用。id

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

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

这也创建了配置301 重定向的选项以保留索引，即使在slug通过保存旧 slug 进行更改后也是如此。但是这样的问题超出了当前问题的范围，即使是一个很好的做法。

推荐阅读