vue

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)
})
View Code

 vue的多页应用： 多个 new HtmlWebpackPlugin() 多个入口文件

vue 骨架屏见 sf.gg 收藏

vue 预渲染：会生成静态页面，装插件时要装对应chrome

(推荐)prerender-spa-plugin    vue-cli-plugin-prerender-spa

 

posted @ 2019-05-20 18:15  gyz418  阅读(122)  评论(0)  编辑  收藏  举报