Vue两种路由模式的实现

抬头第一眼，是天

已于 2022-10-06 00:02:03 修改

阅读量335

点赞数

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2022-10-04 15:06:00 首次发布

本文链接：https://blog.csdn.net/Mr_Ypp/article/details/127161892

版权

Vue2 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue的路由模式

两种模式：hash，history
hash的原理完全是前端方法构成：监听hashchange事件，判断路由的跳转
history的原理则需要后端配合：HTML5新增的history相关的api，history。pushState() history.replaceState() 监听popstate事件，判断前进还是后退
上线前的操作也不同：
hash：不需要额外的操作
history：需要服务器管理人员（运维）配置相关的nginx。如果不做这个相关的配置处理的话，就会有404问题。

小知识点

npm包：history.js。里面提供了很多导航方法

// 使用history模式
import { createBrowserHistory } from "history";

// 许多的导航方法
history.push(to: To, state?: State)
history.replace(to: To, state?: State)
history.go(delta: number)
history.back()
history.forward()

hash

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<ul>
		<li><a href="#/a">去a页面</a></li>
		<li><a href="#/b">去b页面</a></li>
		<li><a href="#/c">去c页面</a></li>
		<li><a href="#/d">去d页面</a></li>
	</ul>

	<div id="route-view"></div>

<script type="text/javascript"> 

// 获取元内容素
var ctn = document.getElementById('route-view') 

// 默认渲染
render('/a')

// 监听hashchange事件 
window.addEventListener('hashchange',function(){
	render(location.hash.slice(1)) 
})

// 分支
function render(router){
    switch (router) {
        case '/a':
        ctn.innerHTML = '这是a页面'
		break;

		case '/b':
		ctn.innerHTML = '这是b页面'
		break;

		case '/c':
		ctn.innerHTML = '这是c页面'
		break;

		case '/d':
		ctn.innerHTML = '这是d页面'
		break;
		
		default:
		ctn.innerHTML = '404页面' 
		break;
	}
}
</script>
</body>
</html>

history

前端部分

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>


<a href="javascript:toA();">A页面</a>
<a href="javascript:toB();">B页面</a>
<a href="javascript:replaceC();">C页面</a>
<div id="app"></div>
<script>
	render()
  	function render() {
  		// console.log(window.location)
  		console.log(window.history)
    	app.innerHTML = window.location.pathname
  	}
  	function toA() {
    	history.pushState({}, null, '/a')
    	render()
  	}
  	function toB() {
    	history.pushState({}, null, '/b')
    	render()
  	}

  	function replaceC() {
    	history.replaceState({}, null, '/c')
    	render()
  	}

  	window.addEventListener('popstate', render)
</script>

</body>
</html>

后端部分

const http = require('http')
const fs = require('fs')
const httpPort = 3003

http.createServer((req, res) => {
	
  fs.readFile('index.html', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.html" 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)
})