如何通过JavaScript实现点击锚点标签重定向至新路由？

要通过JavaScript实现锚点点击后的路由重定向，而非依赖a标签默认跳转行为，可按以下方式操作：

方法一：绑定点击事件，拦截默认行为后跳转 #

1. 先给锚点标签加个类名，方便JS定位元素：

<a href="/posts/<%=tile%>" class="read-more-btn">Read More</a>

2. 在页面的<script>标签里写点击逻辑：

// 获取所有"Read More"按钮
const readMoreBtns = document.querySelectorAll('.read-more-btn');

readMoreBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 阻止a标签自带的跳转
    e.preventDefault();
    // 获取目标路由地址
    const targetUrl = this.getAttribute('href');
    // JS方式跳转到目标路由
    window.location.href = targetUrl;
  });
});

方法二：不依赖a标签href，直接JS构造路由跳转 #

如果不想在a标签里写href，也可以通过自定义属性传递数据，再构造路由：

1. 修改EJS里的锚点标签：

<a class="read-more-btn" data-tile="<%=tile%>">Read More</a>

2. 对应的JS逻辑：

const readMoreBtns = document.querySelectorAll('.read-more-btn');

readMoreBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    const tile = this.getAttribute('data-tile');
    // 和后端路由逻辑统一，把title转成小写
    const targetUrl = `/posts/${tile.toLowerCase()}`;
    window.location.href = targetUrl;
  });
});

额外提醒 #

• 你后端路由里有拼写错误：resquestedTitle应该是requestedTitle，respose6应该是response6，得修正这些错误，不然路由逻辑会出问题。
• 后端用_.lowerCase()处理请求的title，前端也统一转小写的话，能减少匹配失败的概率。
• 如果posts数组数据量比较大，用forEach遍历匹配效率很低，建议提前把posts转成以小写title为键的对象，直接通过requestedTitle取对应post：

// 提前构建post映射表
const postMap = {};
posts.forEach(post => {
  const lowerTitle = _.lowerCase(post.tile);
  postMap[lowerTitle] = post;
});

// 简化后的路由逻辑
app.get('/posts/:userId', function (request, response) {
  const requestedTitle = _.lowerCase(request.params.userId);
  const targetPost = postMap[requestedTitle];
  if (targetPost) {
    response.render('post', {
      actualPosts: targetPost.tile,
      postContent: targetPost.bodytext,
      id: request.params.userId,
    });
  } else {
    console.log('Match Not Found: ' + requestedTitle);
    // 这里可以加个404页面渲染
    response.status(404).render('404');
  }
});

内容的提问来源于stack exchange，提问作者Asad Rao