登录  /  注册
博主信息
博文 45
粉丝 0
评论 0
访问量 32938
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
锚点前端路由与Vue前端路由的实现
咸鱼老爷
原创
859人浏览过

基于锚点哈希路由模式

  1. 锚点可以改变url地址,实现在当前页面内部的不同区域之间进行跳转
  2. 因为是在当前页面中跳转,所以页面不会刷新
  3. 所以使用锚点可以完成spa的二大目标:既要改变url,又不刷新页面

原生js实现

  1. <nav>
  2. <a href="#list1">国际新闻</a>
  3. <a href="#list2">娱乐新闻</a>
  4. </nav>
  5. <!-- 该区域专用于显示路由的内容 -->
  6. <div class="route-view"></div>
  7. <script>
  8. let str1 = `<ul id="list1">
  9. <li><a href="">美国</a></li>
  10. <li><a href="">美国</a></li>
  11. <li><a href="">美国</a></li>
  12. <li><a href="">美国</a></li>
  13. </ul>`;
  14. let str2 = `<ul id="list2">
  15. <li><a href="">娱乐</a></li>
  16. <li><a href="">娱乐</a></li>
  17. <li><a href="">娱乐</a></li>
  18. <li><a href="">娱乐</a></li>
  19. </ul>`
  20. //获取路由的内容显示区元素
  21. const rout = document.querySelector('.route-view');
  22. //锚点使用location.hash
  23. //window.location :描述当前url信息
  24. //hashchange:url中的锚点变化时会自动触发这个事件
  25. window.addEventListener('hashchange', show)
  26. window.addEventListener('load', show)
  27. function show() {
  28. console.log(location.hash);
  29. switch (location.hash) {
  30. case '#list1':
  31. rout.innerHTML = str1;
  32. return;
  33. case '#list2':
  34. rout.innerHTML = str2;
  35. return;
  36. default:
  37. rout.innerHTML = str1;
  38. }
  39. }
  40. </script>

vue实现哈希路由

使用vue-router库
路由地址标签<router-link to='/地址'>
路由资源显示<router-view>

  1. <nav class="nav">
  2. <router-link to='/list1'>国际新闻</router-link>
  3. <router-link to='/list2'>娱乐新闻</router-link>
  4. <!-- 路由到的资源显示区域 -->
  5. <router-view></router-view>
  6. </nav>
  7. <script>
  8. let list1 = {
  9. template: `
  10. <ul id="list1">
  11. <li><a href="">美国</a></li>
  12. <li><a href="">美国</a></li>
  13. <li><a href="">美国</a></li>
  14. <li><a href="">美国</a></li>
  15. </ul>`,
  16. };
  17. let list2 = {
  18. template: `
  19. <ul id="list2">
  20. <li><a href="">娱乐</a></li>
  21. <li><a href="">娱乐</a></li>
  22. <li><a href="">娱乐</a></li>
  23. <li><a href="">娱乐</a></li>
  24. </ul>`,
  25. }
  26. //创建路由对象
  27. const router = new VueRouter({
  28. //路由配置项
  29. routes: [
  30. //每一个路由都是一个对象,每一个对象对应着一个路由地址
  31. {
  32. path: '/list1',
  33. component: list1,
  34. }, {
  35. path: '/list2',
  36. component: list2,
  37. },
  38. ],
  39. });
  40. //注册路由
  41. const nav = new Vue({
  42. el: '.nav',
  43. router: router,
  44. })
  45. </script>

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学