vue

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gyz418/p/10895726.html

文章标签：

#javascript #ViewUI

博客介绍了Vue的相关技术，包括history模式实现原理，运行需执行node index.js；多页应用通过多个new HtmlWebpackPlugin()和多个入口文件实现；还提及了骨架屏可参考sf.gg，预渲染会生成静态页面，推荐prerender - spa - plugin等插件。

vue的history模式实现原理运行 node index.js

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history</title>
</head>
<body>
vue-router的 history模式代码
<a href="/">index</a>
<a href="/about">about</a>

<div id="router-view"></div>
<script>
    let a_s= document.querySelectorAll('a')
    let routerView = document.getElementById('router-view')

    // 内容渲染
    function changeContent(href){
      switch(href){
        case '/':
          routerView.innerHTML=`<div>首页</div>`
          break;
        case '/about':
          routerView.innerHTML=`<div>about</div>`
          break;
      }
    }
    changeContent(location.pathname)  // init   这里要处理一下才可以
    // 点击
    Array.from(a_s).forEach(val=>{
      val.addEventListener('click',function (e) {
        e.preventDefault()
        let href = e.target.getAttribute('href')
        history.pushState({},'history',href) // 只变动地址栏，真正的页面跳转要另外处理
        changeContent(href)  // 渲染内容
      })
    })
</script>
</body>
</html>

View Code

index.js

// 代码来自 vue-router history模式 ，读取html，并返回html
// 解决  localhost/about 初始化内容渲染
const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {


  fs.readFile('./0.html', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})