收藏
天蓬老师批改状态：合格
老师批语：
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-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
