vue进阶/ 前端路由原理

前端路由

稍微复杂一点的SPA（singel page Web application：单页web应用）, 都需要路由

spa的路由叫做前端路由，如果是后端路由就不是spa了，就是多页面应用了

1.vue-router的路由模式

1.1Hash

网页url组成部分

location // 位置

location.protocol // http 协议

location.hostname  // ip地址 也可能是域名

location.host // ip地址带端口

location.port // 端口

location.pathname //  后面整个path部分

location.search // ?后面参数  ?id=1

location.hash //   #后面一部分   #123i

通过hash变化触发路由的变化 。

2.hash的特点

hash变化触发网页跳转，即浏览器的前进和后退

2.hash变化不需要刷新页面 spa必须的特点

3.hash永远不会提交到server端（前端自生自灭）

创建的文件html 可以命令行 

http-server -p 8001  //启动服务  我使用的启动失败

// 代码演示

<!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>location</div>
    <button id='btn'></button>
    <script>
        var log = console.log.bind(console)
        window.onhashchange = (event) => {
            log('old url', event.oldURL)
            log('new url', event.newURL)
            log('hash', location.hash)
        }
        //页面初次加载，获取hash
        document.addEventListener('DOMContentLoaded', () => {
            log('load hash:', location.hash)
        })
        //js修改hash
        document.getElementById('btn').addEventListener('click', () => {location.href = '#/user'})
    
    </script>
</body>
</html>

// 改变hash的两种办法 1.js改变   2.手动改变

//hash值变化会改变浏览器的前进与后退

2.H5 history

特点1.用url规范的路由（和正常url一样 分不清前端后端路由）  且页面跳转不刷新页面

特点2.  使用 history.pushState    window.onpopstate

<!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>location</div>
    <button id='btn'></button>
    <script>
        var log = console.log.bind(console)
        
        //页面初次加载，获取hash
        document.addEventListener('DOMContentLoaded', () => {
            log('load :', location.pathname)
        })
       //打开一个新的路由
       //注意用 pushState方式 浏览器不会刷新页面
       document.getElementById('btn').addEventListener('click', function(e) {
           const state = {
               name: 'page1'
           }
           log('change router', 'page1')
           history.pushState(state, '', 'page1')
       })

       // 监听浏览器的前进与后退
       window.onpopstate = (e) => {
           console.log('onpopstate', e.state, location.pathname
           )
       }
    </script>
</body>
</html>

H5 history 是需要后端支持的

一般需要搜索引擎优化的才用  H5

 

posted @ 2020-05-02 19:09  容忍君  阅读(374)  评论(0)    收藏  举报