2020-05-07--Vue路由1--路由概念，hash

2020-05-07 本文已影响0人 program_white

一.路由的概念与原理

路由的本质就是一种对应关系，比如我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。
路由分为

前端路由
后端路由

后端路由

后端路由是根据不同的用户URL请求，返回不同的内容，本质就是URL请求地址与服务器资源之间的对应关系。由服务器端进行实现，并完成资源的分发。

前端路由

前端路由依靠hash值(锚链接)的变化进行实现。

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由。基本概念：根据不同的事件来显示不同的页面内容，即用户事件与事件处理函数之间的对应关系。前端路由主要做的事情就是监听事件并分发执行事件处理函数。

hash值(锚链接):
示例：

<body>
    <a href="#two">第二页</a>
    <a href="#three">第三页</a>
    <div style="height: 1500px;">one</div>
    <div id="two" style="height: 1500px;">two</div>
    <div id="three" style="height: 1500px;">three</div>
</body>

运行：

当我们点击第二页时，

页面的url的后面会增加该超链接的内容，显然url改变了，但是对于后端路由来说，这个url没有改变。因为它不认识后边的#two。所以这还是一个页面的显示。

但是对于前端路由来说，它可以感觉到这个url的变化，会根据url后边的#two进行显示相应的页面。

支持前进和后退的功能

SPA（Single Page Application）单页应用

后端渲染（存在性能问题）
Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的后退操作）
SPA单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
SPA的实现原理之一：基于URL地址的hash（hash的变化会导致浏览器访问历史记录的变化，但hash的变化不会触发新的URL请求，但是网页的url会不断显示#xxx）
在实现SPA的过程中，最核心的技术点就是前端路由
单页应用不是想当然的整个网站只有一个html文件，还是分模块进行开发，通过前端路由进行跳转。
vue开发的网页--单页应用---核心是前端路由--有两种
基于hash(默认)
history

基于hash的前端路由(原始的通过监听hash值变化)

前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）核心实现依靠一个事件，即监听hash值变化的事件

window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}

示例：
简单的页面跳转

<body>
    <a href="#two">第二页</a>
    <a href="#three">第三页</a>
    <div style="height: 1500px;">one</div>
    <div id="two" style="height: 1500px;">two</div>
    <div id="three" style="height: 1500px;">three</div>
    <script>
        #监听hash的值
        window.onload = function(){
            window.onhashchange = function(){
                alert(location.hash)
            }
        }
    </script>
</body>

运行：

点击第二页

简单的小案例

<body>
    <div id="app">
        <a href="#zhuye">主页</a>
        <a href="#keji">科技</a>
        <a href="#caijing">财经</a>
        
        <!-- 给名为zhuye的组件占位 -->
        <component is='zhuye'></component>
        
    </div>
    <script>
        //定义组件
        let zhuye = {
            template:'<div>主页信息</div>'
        }
        let vm = new Vue({
            el:'#app',
            data:{
            },
            //注册组件
            components: {
                'zhuye':zhuye
            }
        })
    </script>

分析：

结果：

插：当JSON对象中的键值对的键名和值一摸一样时，可以直接写一个即可。

components:{
       'zhuye':zhuye     <=======>       zhuye
}

那么对上边的案例进行完善：
基于hash的前端路由的实现：

<body>

    <div id="app">
        <a href="#zhuye">主页</a>
        <a href="#keji">科技</a>
        <a href="#caijing">财经</a>
        
        <!--给名为comName的组件占位，comName在Vue实例的data中赋值 -->
        <component :is='comName'></component>
    </div>

    <script>
        //定义组件
        let zhuye = {
            template:'<div>主页信息</div>'
        }
        let keji = {
            template:'<div>科技信息</div>'
        }
        let caijing = {
            template:'<div>财经信息</div>'
        }
        //Vue实例
        let vm = new Vue({
            el:'#app',
            data:{
                //动态数据
                comName:'zhuye'
            },
            //注册组件，当键值对的名一样时，可以直接写一个
            components: {
                zhuye,           //'zhuye':zhuye
                keji,
                caijing
            }
        })

        //监听hash的值
        window.onhashchange = function() {

            console.log(location.hash)
            //把hash的值赋给comName，实现组件的变换
            vm.comName = location.hash.slice(1)
        }
    </script>
</body>

实现效果：
点击主页，在url的后缀加了#zhuye，并显示名为zhuye的内容

点击科技，在url的后缀加了#keji，并显示名为keji的内容

点击财经，在url的后缀加了#caijing，并显示名为caijing的内容

并在控制台显示点击不同的链接不同的hash。

核心思路：在页面中有一个vue实例对象，vue实例对象中有三个组件，分别是tab栏切换需要显示的组件内容在页面中有三个超链接，如下：

<a href="#/zhuye">主页</a> 
<a href="#/keji">科技</a> 
<a href="#/caijing">财经</a>

当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件，然后得到当前hash值，根据这个hash值来让不同的组件进行显示。