如何使用 Vuejs 标记 URL
我正在建立一个包含多篇文章的网站。我正在使用 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"}
},
]
如果 API 或 DB 中不存在 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
}
在“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();
}
随着复杂程度的增加和所关注的方面，存在不同的方法。
因此，首先，为了
slug
化文章，您必须将 slug 引入应用程序。由于评论中提到所有文章都是事先获取的，因此可以在将 slug 保存到存储之前，将 slug 添加到每个文章数据中，使用自定义函数将单词转换为 kebab-case 或辅助库之一（例如
dashify
）。
这将使得使用
:slug
作为路由
param
而不是
id
来呈现文章链接列表，并在呈现文章页面之前按
param
在商店中搜索。好消息是，通过扩展逻辑以按 2 个字段进行搜索，仍然可以保留两个选项（
slug
和
id
）。
取决于您的目标 - 可能就是这样。但如果文章标题已更改，并且用户通过外部保存的链接（在社交媒体上共享、被搜索引擎索引等）访问文章，则会出现问题。这破坏了 SEO 。
为了保持文章的可访问性，最好在后端将
slug
作为必填字段包含。仍然可以使用相同的方法生成 Slug，但在 CMS 中 - 在文章存储在数据库之前。在这种情况下，可以对其进行双重检查、手动编辑（因为由于字符长度、特殊符号等原因，slug 并不总是代表完整的文章标题）并可供查询，从而消除了前端应用程序进行字符串操作的麻烦。
此外，这还创建了配置
301 重定向
的选项，以便即使在通过保存旧 slug 更改
slug
后也能保留索引。但这样的问题超出了当前问题的范围，尽管这是一种很好的做法。
路由器：
849348537
组件：
使用beforerouteenter显示slug
059377420