如何使用 Vuejs 插入 url

Question

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

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

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

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

Answer 1

如果 API 或数据库中不存在，首先在 JSON 对象中添加一个 slug

{
  id: 1,
  title: 'Jungle Book',
  slug: 'jungle-book',
  showDate: 'Monday',
  showTime: '19:10 - 20:55'
}

根据您的路径和组件更改路由器索引文件中的路径。并且路径应该有“:slug”

 {
   path: '/movies/:slug',
   name: 'moviedetail',
   component: MovieDetail
}

在“router-link”中，在 v-for 之后添加 slug

<router-link :to="'/movies/' + movie.slug">

现在从您的组件获取数据

 data() {
   return {
      movie: this.$store.state.data,
      movieDetail: []
   }
 },

 methods: {
     getMovie(){
        this.movie.forEach(e => {
           if(e.slug == this.$route.params.slug){
              this.movieDetail = e;
           }
        });
      }
  },

  created() {
     this.getMovie();
  }

Answer 2

有不同的方法随着复杂性和关注方面的增加而增加。

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

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

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

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

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