批改老师:天蓬老师
批改状态:合格
老师批语:
1.相关知识点:
location.hash
:获取url中的锚点地址hashchange
:url锚点改变事件2.代码演示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基于锚点的哈希路由</title>
</head>
<body>
<nav>
<a href="#tupian1">图片1</a>
<a href="#tupian2">图片2</a>
</nav>
<div class="route-view">
</div>
</body>
<script>
let view=document.querySelector(".route-view");
window.addEventListener("hashchange",show);
function show(){
console.log(location.hash);
switch(location.hash.trim()){
case "#tupian1":
view.innerHTML="<h1>图片1</h1>"
break;
case "#tupian2":
view.innerHTML="<h1>图片2</h1>"
break;
default:
view.innerHTML="图片"
}
}
window.addEventListener("load",show);
</script>
</html>
1.相关知识点
https://unpkg.com/vue-router@3.4.9/dist/vue-router.js
<router-link to="/path"></router-link>
标签组成路由链接,其to属性路由路径;<rotuer-view></rotuer-view>
路由内容显示区域
const router=new VueRouter({
routes:[
{path:"/",redirect:"/part1"},//设置默认展示的路由页面
{path:"/part1",component:part1},
{path:"/part2",component:part2},
],
linkActiveClass:"red",
})
2.代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue路由入门</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<div class="app">
<router-link to="/part1">国内新闻</router-link>
<router-link to="/part2">国际新闻</router-link>
<router-view></router-view>
</div>
</body>
<script>
let part1={
template:`<ul><li>国内one</li><li>国内two</li><li>国内three</li></ul>`
}
let part2={
template:`<ol><li>国际one</li><li>国际two</li><li>国际three</li></ol>`
}
const router=new VueRouter({
routes:[
{path:"/",redirect:"/part1"},//设置默认展示的路由页面
{path:"/part1",component:part1},
{path:"/part2",component:part2},
],
linkActiveClass:"red",//激活的样式
})
new Vue({
el:".app",
router:router,
})
</script>
</html>
3.展示结果
1.history.pushState(null,"",link.href)
:把获得的href值push到url中
2.popstate
:事件,监听url的改变
3.location.pathname
:获取当前url中的值
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号