Vue Router

最新推荐文章于 2024-07-25 09:51:39 发布

名师点津

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量518

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51281306/article/details/124505393

版权

单页应用

SPA（Single Page Application）单页面应用程序，简称单页应用。指的是网站的 “所有” 功能都在单个页面中进行呈现。具有代表性的有后台管理系统、移动端、小程序等。

• 优点：

• 前后端分离开发，提高了开发效率。

• 业务场景切换时，局部更新结构。

• 用户体验好，更加接近本地应用。单页应用

• 缺点：

• 不利于 SEO。

• 初次首屏加载速度较慢。

• 页面复杂度比较高。

前端路由

前端路由，指的是 URL 与内容间的映射关系URL、内容、映射关系。

• Hash 方式

通过 hashchange 事件监听 hash 变化，并进行网页内容更新。

特点总结：

• Hash 方式兼容性好。

• 地址中具有 #，不太美观。

• 前进后退功能较为繁琐。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <a href="#/">首页</a>
    <a href="#/category">分类页</a>
    <a href="#/user">用户页</a>
  </div>
  <div id="container">
    这是首页功能
  </div>

  <script>
    // 准备对象，用于封装 hash 功能。
    var router = {
      // 路由存储位置： 保存了 url 与 内容处理函数的对应关系。
      routes: {},
      // 定义路由规则的方法
      route: function (path, callback) {
        this.routes[path] = callback;
      },
      // 初始化路由的方法
      init: function () {
        var that = this;//使that指向router对象，在下面函数this会指向window
        window.onhashchange = function () {
          // 当 hash 改变，我们需要得到当前新的 hash
          var hash = location.hash.replace('#', '');
          // 根据 hash 触发 routes 中的对应 callback
          that.routes[hash] && that.routes[hash]();
        };
      }
    };

    var container = document.getElementById('container');
    // 定义路由规则
    router.route('/',

最低0.47元/天解锁文章

名师点津

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue Router

单页应用 SPA（Single Page Application）单页面应用程序，简称单页应用。指的是网站的 “所有” 功能都在单个页面中进行呈现。具有代表性的有后台管理系统、移动端、小程序等。• 优点： • 前后端分离开发，提高了开发效率。 • 业务场景切换时，局部更新结构。 • 用户体验好，更加接近本地应用。单页应用 • 缺点： • 不利于 SEO。 • 初次首屏加载速度较慢。 • 页面复杂度比较高。前端路由前端路由，指的是 URL 与内容.
复制链接

扫一扫