URL：协议://主机:端口/路径？查询
URL: scheme://localhost:port/path?query
里面的qurey是type=sell&page=3&...
什么=什么然后再用&连接
1.改变url但是不刷新页面的7种方式
html4
- history.go
- history.back
- history.forward()
html5
-
pushState(data{}, title'', url)
ata参数表示再添加记录时传递的数据对象,页面显示的标题，页面跳转地址 -
popState(data{}, title'', url)
-
replaceState(data{}, title'', url)
-
location.href:可以获取到地址栏的信息（当前页面的完整路径）
-
location.hash来改变href, location.hash="/foo"
2.实现原理
2.1 hash 模式下
1. this.$router.push()
this.$router.push()是由vue-router内部调用HashHistory.push()方法，这个方法本质是直接改变window.location.hash的值来实现的。将新路由添加到浏览器访问历史的栈顶。
window.onHashChange来监听hash值的改变，一旦发生变化就找出此hash值所匹配的组件，
进而将组件渲染到页面中。但是hash模式这种带hash值的url是非常丑的，项目中也很少用hash模式。
<body>
<div id="app">
<a href="#/main">main</a>
<a href="#/login">login</a>
<!-- 注意这里href里面只能是#开头，不能/开头 -->
</div>
<script>
console.log(location.hash) //空的字符串
console.log(location.href) //http://127.0.0.1:5500/src/store/index.html
location.hash = '/'
console.log(location.hash) // #/
console.log(location.href) // http://127.0.0.1:5500/src/store/index.html#/
/* location.hash就是#后面的东西 */
location.hash = '/foo'
console.log(location.hash) // #/foo
console.log(location.href) //http://127.0.0.1:5500/src/store/index.html#/foo
/*通过以上的方式是可以通过浏览器的返回，前进按钮来看历史记录的 */
</script>
</body>
2. this.$router.replace()
this.$router.replace()是由又vuerouter内部调用HashHistory.replace()方法，这个方法本质是用window.location.replace方法将路由进行替换。
<body>
<button class="mybutton">button</button>
<script>
location.hash = '/foo'
console.log(location.hash) // #/foo
console.log(location.href) // http://127.0.0.1:5500/demo.html#/foo
/* location.hash就是#后面的东西,包括# */
const btn = document.querySelector('.mybutton')
btn.onclick = function () {
console.log('btn click')
location.replace('http://127.0.0.1:5500/demo.html#/bar')
console.log('replace end')
console.log(location.hash)
console.log(location.href)
}
</script>
</body>
进入页面之后，
image.png
这时候第一次打开页面，没有回退和前进按钮有效，
然后我们点击按钮，location.replace当前的路由，从#/foo到#bar
image.png
回退按钮也没有变的有效。
3.实现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>Document</title>
</head>
<body>
<div id="app">
<a href="#/main">main</a>
<a href="#/login">login</a>
<!-- 注意这里href里面只能是#开头，不能/开头 -->
</div>
<div class="content">
<div class="router-view">router-view</div>
</div>
<script>
const rouerView = document.querySelector(".router-view");
window.addEventListener("hashchange", () => {
console.log("hashchange", location.hash);
switch (location.hash) {
case "#/main":
rouerView.innerHTML = "main";
break;
case "#/login":
rouerView.innerHTML = "login";
break;
default:
rouerView.innerHTML = "not found";
}
});
</script>
</body>
</html>
2. hitory模式
2.1 this.$router.push()
this.$router.push()---》window.history.pushState(stateObject, title, URL)
2.2 this.$router.replace()
this.$router.replace()--->window.history.replaceState(stateObject, title, URL)
不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由。
2.3 实现vue-router
通过window.onpopstate来监听路由变化，进而匹配不同的组件来渲染出来。
<!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>
<div id="app">
<a href="/main">main</a>
<a href="/login">login</a>
</div>
<div class="content">
<div class="router-view">router-view</div>
</div>
<script>
const rouerView = document.querySelector(".router-view");
const aEls = document.querySelectorAll("a");
const historyChange = function () {
switch (location.pathname) {
case "/login":
rouerView.innerHTML = "login";
break;
case "/main":
rouerView.innerHTML = "main";
break;
default:
rouerView.innerHTML = "not found";
}
};
for (const aEl of aEls) {
aEl.addEventListener("click", (e) => {
e.preventDefault();
const href = aEl.getAttribute("href");
history.pushState({}, "", href);
historyChange();
});
window.addEventListener("popstate", historyChange);
/*
点击浏览器的【前进】【后退】按钮，或者调用 history 对象的 back、forward、go
方法调用过 history 对象的 replaceState 或 pushState 方法
都会满足popstate的触发条件
*/
}
</script>
</body>
</html>
网友评论