vue-router的history模式

vue-router的history模式

开启history模式

const router=new VueRouter({
    //通过指定mode选项为history,开启history模式
    mode:"history",
    routes:[...]
})

history和hash的区别

  • 路径:history路径没有#号,hash有#号,history每次改变路径都相当于重新请求文件资源,hash并没有在路径改变时重新发起请求,而是通过hash参数获取相应的文件资源
  • history是通过window.history实现路径跳转的,因此每一次访问都会重新刷新页面

history需要后端支持

  • 在开发环境下,hisroty并不会产生任何的异常,但是在生产环境下,如果没有后端的支持,将会访问不到任何的页面
    • history模式下,每访问一次路径都相当于发送一次get请求,如果此时后端没有相应的路由匹配,将会产生异常
  • node环境下配置支持history路由
#借助connect-history-api-fallback
const http = require("http")
const history = require('connect-history-api-fallback');
const express = require("express")

const app = express()

app.use(history())

app.use(express.static("./")) #配置静态文件路径必须在history()后面

http.createServer(app).listen(3000, () => {
    console.log("http://localhost:%s", 3000)
})



#不借助connect-history-api-fallback
const http = require("http")
const fs=require("fs")
const express = require("express")

const app = express()

app.use(express.static("./"))

app.use((req,res)=>{
     fs.readFile('index.htm', '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)
  })
})

http.createServer(app).listen(3000, () => {
    console.log("http://localhost:%s", 3000)
})
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页