Question

我正在建立一个包含几篇文章的网站。我正在使用Vue Router，目前，我的文章的网址看起来像/ article / id，例如：list_of_ints = [4,2,7,6,8,1,5,9,2] print(min(list_of_ints)。

如何将带有文章标题的URL塞入，例如可以是http://localhost:8080/article/85？

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

http://localhost:8080/article/the-article-title

Answer 1

如果您的API或数据库中不存在slug，请首先在您的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
}

在“路由器链接”中，在v-for之后添加该子弹

<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化文章，您必须向应用程序中引入信息。由于在评论中提到所有文章都是事先获取的，因此可以在将其存储到使用将单词转换为kebab-case或辅助库之一（例如dashify）的自定义函数存储之前，将条添加到每个文章数据。

这将使使用:slug作为路线param而不是id来呈现文章链接列表，并在呈现文章页面之前按param在存储中搜索。好消息是，通过扩展逻辑来按2个字段进行搜索，仍然可以使两个选项（slug和id）保持可用。

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

为了使文章易于访问，将slug作为后端的必填字段是一种好习惯。子弹仍然可以用相同的方法生成，但是在CMS中-在文章存储在数据库中之前。在这种情况下，可以对其进行仔细检查，手动编辑（因为由于字符长度，特殊符号等原因，并不总是代表完整的文章标题），并且可以进行查询，从而消除了前端处理字符串的麻烦。 >

这还创建了一些选项，用于配置301 redirects来保留索引，即使通过保存旧的标签更改了slug之后也是如此。但这是当前问题范围之外的内容，即使是一种很好的做法。

Answer 3

路由器：

{
  path: '/:slug',
  name: 'article',
  component: articlePage
}

组件：

使用beforeRouteEnter显示该弹头

beforeRouteEnter(to, from, next) {
    console.log(to.params.slug);
}

如何使用Vue.js投射网址

3 个答案: