怎么利用Node.js進行html頁面跳轉

怎么利用Node.js進行頁面跳轉？本篇文章給大家介紹一下基于Node實現html頁面跳轉的方法，希望對大家有所幫助！

問題描述

最近在使用Node.js和html學習頁面的相關知識，在學習到頁面跳轉時，出現了跳轉不成功的問題，在這里記錄下，供以后參考。

在Node.js中，主要使用express框架，前端則使用html。

項目代碼結構

該小Demo主要涉及四個文件，包括：

• main.js：該部分為起始文件，是整個項目的入口文件；

• main.html：該部分是主頁面的html文件；

• new.html：要跳轉頁面的html文件；

• router.js：路由文件，用來根據URL及參數給出具體的操作；

• node_modules：存放相關模塊的文件夾。

注：main.html和new.html兩個在views文件夾下。

相關模塊配置

使用npm分別install以下三個模塊：

• express
• art-template
• express-art-template

構建main.js

代碼部分如下：

const express = require('express') const app = express() const router = require('./router')  app.engine('html',require('express-art-template')) app.use(router)  app.listen(3000,() => {   console.log('successful...') })

實現了對3000端口的監聽。

構建router.js

在該文件中，主要創建路由實例，對URL及相關參數實現監聽，并渲染相關界面。

代碼部分如下：

const express = require('express') //創建路由實例 const router = express.Router()  router.get('/',(req,res) => {    res.render('main.html') })  module.exports = router  //暴露接口

構建main.html

在該文件下，只實現了一個超鏈接，用來實現實現頁面的跳轉，代碼部分如下：

<div>  <a href="/new" >頁面跳轉</a> <!--跳轉至新頁--> </div>

構建new.html

本文件十分簡單，只是用一行輸出語句來表示跳轉成功，代碼部分如下：

<div>  <th>成功實現跳轉</th> </div>

運行結果

在小黑屏中輸入命令：

node main.js

代碼成功運行，打開http://localhost:3000：

可以看到出現了跳轉頁面的超鏈接，點擊這個超鏈接：

頁面并沒有實現有效的跳轉。

問題分析與解決

如果純粹使用html語言，是可以直接實現超鏈接的跳轉的，在使用router后，應該實現對相關URL的監聽才可以實現跳轉的目標。

于是，在router.js中補充如下的代碼：

router.get('/new',function(req,res){   res.render('new.html') })

即當URL為localhost:3000/new時，使用res.render跳轉。

由于html的超鏈接與render渲染的鏈接保持一致，因此可以實現使用超鏈接的跳轉。

跳轉的效果如下：

至此問題解決啦！