使用 Pug 表达：GET http://localhost:3004/contact 404（未找到）

Question

我正在使用Express.js和Pug作为视图引擎创建一个应用程序。它具有一个导航栏，将用户重定向到3个可能的页面： homepage ， contact 和我们的服务。

---

这里的问题是只有主页成功出现。其余页面（contact.pug和我们的services.pug）向我展示错误： ）”，尽管Navbar确实出现在每个页面中的顶部。

我确保在所有页面上：

1. 在路由文件夹中存在一个JS文件，该文件列出了页面：（

路由/contact.js）

    var express = require('express');
    var router = express.Router();
    var valid = require("../mychecker");
    
    router.get('/contact', function(req, res){
       if(valid()){
        res.render('contact', {
           name:"You can contact us here"
        });
       }
       else res.send("you are using this website outside working hours.");
     })
    
    module.exports = router;

2. 每个页面的路由器都导入到应用程序中。 JS并使用app.use（）。

3. 可以使用layout.pug中的“按钮”访问每个页面。这是每个page.pag.pug file。

我试图检查主页的代码和联系人和我们的服务页面之间的任何差异，但我没有注意到任何不同的东西。

这是我的app.js文件：

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var homeRouter = require('./routes/homepage');
var contactRouter = require('./routes/contact');
var servicesRouter = require('./routes/our-services');

var app = express();

app.listen(3004, function(){
  console.log('Express listening on port', this.address().port);
});
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(['/','/home'], homeRouter);
app.use('/contact', contactRouter);
app.use('/our-services', servicesRouter);


// catch 404 and forward to error handler
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


module.exports = app;

这是我的layout.pug文件：

doctype html
html
  head
      style(type="text/css").
          nav {
              background-color: black;
              margin:0;
              padding:5px;
          }
          nav a{
              color:aliceblue;
              text-decoration: none;
              margin: 0 10px 10px 0;
          }

      nav
          ul 
                  a(href="home") Home              
                  a(href="our-services") Services              
                  a(href="contact") Contact 
  body
    block content

最后，这就是每个页面。 （视图/contact.pug）

extends layout

block content
   body
      h1=name

Answer 1

创建路由器文件、导入并在 app.js 中使用它时，您在此处提供的路由：

app.use('/contact', contactRouter);

在您的主路由之上使用。
这意味着联系页面的链接是 - HTTP://localhost:3004/contact/contact。
对于您创建的每个路由器都是如此。

如果您希望页面网址为 localhost:3004/contact/ ，您应该将语句更改为：

router.get('/', function(req, res){
       if(valid()){
        res.render('contact', {
           name:"You can contact us here"
        });
       }
       else res.send("you are using this website outside working hours.");
     })