Vue路由

最新推荐文章于 2024-03-22 09:22:21 发布

VIP文章卖火柴的小男孩2

最新推荐文章于 2024-03-22 09:22:21 发布

阅读量1.5k

点赞数

分类专栏：前端框架Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42839746/article/details/124698119

版权

一、什么是路由

1、提到路由，一般会想到生活中常见的路由器，路由器主要用于连接多个逻辑上分开的网络，逻辑网络代表一个单独的网络或者一个子网，可以通过路由器功能来完成不同网络之间数据的传递。在Vue中也引入了路由的概念，因此，我们先来对程序开发中的路由进行简单地了解。

假如有一台提供 Web 服务的服务器的网络地址是localhost:8080，而该 Web 服务又提供了三个可供用户访问的页面

http:// localhost:8080/

http://localhost:8080/login

http://localhost:8080/regsiter

访问路径分别是 /、/login、/regsiter

简单的说，路由是根据不同的 url 地址展示不同的内容或页面

程序开发中的路由分为后端路由和前端路由。

2、后端路由

后端路由通过用户请求的URL分发到具体的处理程序，浏览器每次跳转到不同的URL，都会重新访问服务器。服务器收到请求后，将数据和模板组合，返回HTML页面，或者直接返回HTML模板，由前端JavaScript程序再去请求数据，使用前端模板和数据进行组合，生成最终的HTML页面。

后端路由的工作原理如下图所示。

当用户在浏览器中输入URL地址http://localhost:8080/login来访问“登陆”页面时，服务器就会收到这个请求找到相对应的处理程序，这就是路由的分发，这一功能是通过路由来实现的。

温馨提示：浏览器每访问一次新页面的时候，都要向服务器发送请求，然后服务器会响应请求，返回新页面给浏览器，在这个过程中会有一定的网络延迟。

3、前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。对于单页面应用（SPA）来说，主要通过URL中的hash（#号）来实现不同页面之间的切换。hash有一个特点，就是HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash来实现。

前端路由的工作原理如下图所示。

上图中，index.html后面的“#/home”是hash方式的路由，由前端路由来处理，将hash值与页面中的组件对应，当hash值为“#/home”时，就显示“首页”组件。

二、前端路由的基本原理

1、案例说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端路由的基本原理</title>
</head>
<body>
    <a href="#/login">登陆界面</a>
    <a href="#/register">注册界面</a>
    <div id="app"></div>
    <script>
        var appDiv= document.getElementById("app");

        window.onhashchange=function(){    ///监听onhashchange事件，用于改变url     
            console.log(location.hash)
            switch(location.hash){    //window.location.hash 获取当前的hash值
                case '#/login': appDiv.innerHTML="<h2>我是登陆界面</h2>"
                                break;
                case '#/register': appDiv.innerHTML="<h2>我是注册界面</h2>"
                                break;
                default:break;
            }
        }
    </script>
</body>
</html>

当你点击登陆界面时，浏览器地址栏的hash会变成#/login

这里的hash就是指url后的#号以及后面的字符，比如说"https://www.baidu.com/#home",其中“#home”就是hash值。

三、Vue-router

1、vue-router工作原理

单页面应用（SPA）的核心思想之一，它在加载页面时，不会加载整个页面，只会更新视图（即某个指定的容器中的内容）。

在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。

hash模式

vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值，称为hash值。

路由的hash模式是利用了window可以监听onhashchange事件来实现的，也就是说hash值是用来指导浏览器动作的，对服务器没有影响，HTTP请求中也不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。