vue中路由的三种模式

文章类型:Vue

发布者:hp

发布时间:2022-08-15

主要有三种路由模式：hash、history、abstract

在开发中，会配置路由，路由模块的本质是建立起url和页面之间的映射关系，就会用到路由模式，一般我们默认的是hash模式，还有一种是histroy模式

mode: 'history',

一：hash模式

特点：

1：就是url地址栏上会出现#,当#号后面的路径发生变化时，浏览器不会重新发送请求，而会触发onhashchange事件，不会刷新页面，主要通过window.location.hash值变化来改变路由

2：hash值改变会在浏览器访问历史中增加记录，可以通过前进、后退进行hash值切换

3：hash不会修改浏览器历史记录栈

4：生成二维码、微信分享页面的时候都会自动过滤掉#后面的参数

优点:浏览器兼容性好，IE8都支持

缺点:路径在#号后边，比较丑，对seo不友好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<a href="#/a">A页面</a>
			<a href="#/b">B页面</a>
		</div>
		<div id="app">
			<div >111111</div>
		</div>
	</body>
</html>
<script>
  function render() {
	  console.log('触发')
    app.innerHTML = window.location.hash
  }
  window.addEventListener('hashchange', render)
  render()
</script>

利用a标签设置了两个路由导航，把app当做视图渲染容器，当切换路由的时候触发视图容器的更新，这其实就是大多数前端框架哈希路由的实现原理

二：histroy模式

特点：

1：H5提供的新特性，会触发popstate，是不会出现#，比hash模式好看，

2：history会修改浏览器历史记录栈，history.pushState用于在浏览历史中添加历史记录，history.replaceState修改浏览历史中当前纪录，不会触发页面刷新

3：history修改的url可以是同域的任意url

优点:路径比较正规，没得#

缺点：兼容性不如hash,且需要服务端支持，否则刷新404

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<a href="javascript:toA();">A页面</a>
			<a href="javascript:toB();">B页面</a>
		</div>
		<div id="app">
			<div >111111</div>
		</div>
	</body>
</html>
<script>
  function toA() {
	history.pushState({},null,'/a')
   render()
  }
  function toB() {
	   history.pushState({},null,'/b')
  	
   render()
  }
  function render() {
  	  console.log('触发')
	  
    app.innerHTML = window.location.pathname
  }
  window.addEventListener('popstate', render)

</script>

history 的 pushState 和 replaceState方法不能被监听到，像go,back,forward可以被监听到，

浏览器在刷新的时候，会按照路径发送真实的资源请求，如果这个路径是前端通过 history API 设置的 URL，那么在服务端往往不存在这个资源，于是就返回 404 了，

因此在线上部署基于 history API 的单页面应用的时候，一定要后端配合支持才行，否则会出现大量的 404。

以最常用的 Nginx 为例，只需要在配置的 location / 中增加下面一行即可：

try_files $uri /index.html;

三：abstract(MemoryHistory)

支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。缺点：没有URL，只对单机有效。前面两种都是把路径存到URL上面。memory模式不放在URL里面，前端一般放在localstorage里面。

上一篇JS中null、undefined、NaN的区别

下一篇vue中的插槽(slot)