vue

Posted 2021-12-02 gyz418

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue相关的知识，希望对你有一定的参考价值。

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

<!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的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家