vue-router原理

最新推荐文章于 2022-12-02 07:15:00 发布

冰雪奇缘lb

最新推荐文章于 2022-12-02 07:15:00 发布

阅读量87

点赞数 1

分类专栏： Vue 文章标签： javascript vue.js node.js

本文链接：https://blog.csdn.net/weixin_44682587/article/details/120569450

版权

前端路由 Hash路由 History路由 HTML5 History API 页面跳转

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

hash路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myBtn">改变</button>
</body>
<script>
   
   const myBtn = document.getElementById("myBtn")
	
	// 页面加载时获取路由
	window.addEventListener('DOMContentLoaded', () => {
		console.log(location.hash)
	})
	
	// 改变路由
	myBtn.addEventListener('click', () => {
		location.href = '#/user'
	})
	
	// 监听路由改变
	window.onhashchange = e => {
	    console.log('旧url: ', e.oldURL)
	    console.log('新url: ', e.newURL)
	    console.log('hash: ', location.hash)
	}
</script>
</html>

history路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myBtn">改变url</button>
</body>
<script>
	const myBtn = document.getElementById("myBtn")
	
	// 页面加载时获取路由
	window.addEventListener('DOMContentLoaded', () => {
		console.log('path: ', location.pathname)
	})
    
	// 改变路由
	myBtn.addEventListener('click', () => {
		const state = {name: 'user'}
		history.pushState(state, '', 'user')
		console.log('切换路由到了: ', 'user')
	})
	
	// 监听路由的改变
	window.onpopstate = e => {
		console.log('onpopstate', e.state, location.pathname)
	}
</script>
</html>

冰雪奇缘lb

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router原理

hash路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫

专栏目录