Vue路由（安装保姆教程）

白泽的笔记

已于 2022-10-12 09:06:54 修改

阅读量2.4k

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-10-11 23:15:14 首次发布

本文链接：https://blog.csdn.net/m0_51024444/article/details/127273427

版权

路由原理

原理：地址发生变化，刷新页面，检测地址栏变化切换div更新视图

hash路由

事件window.hashchange

历史记录路由

window.onpopstate

history.pushState(state, title, url)

例子（普通，建议不要看，只是方便理解原理，下方有详细安装Vue路由配置）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            text-decoration: none;
            /* 指正常的未被访问过的链接*/
        }

        a:visited {
            text-decoration: none;
            /*指已经访问过的链接*/
        }

        a:hover {
            text-decoration: none;
            color: #C81623;
            /*指鼠标在链接*/
        }

        a:active {
            text-decoration: none;
            /* 指正在点的链接*/
        }

        .pages .router-view {
            width: 800px;
            height: 600px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#/" class="router-link">首页</a>|
        <a href="#/about" class="router-link">关于</a>|
        <a href="#/user" class="router-link">用户中心</a>|
        <a href="#/product" class="router-link">产品中心</a>
    </div>
    <div class="pages">
        <div class="router-view" id="Home">
            首页页面
        </div>
        <div class="router-view" id="About">
            关于我们页面
        </div>
        <div class=" router-view" id="User">
            用户中心
        </div>
        <div class=" router-view" id="Product">
            产品中心
        </div>
    </div>

</body>
<script>
    //写一个页面div与hash 一一对应的配置
    var routes = [
        { path: "/", component: document.getElementById("Home") },
        { path: "/about", component: document.getElementById("About") },
        { path: "/user", component: document.getElementById("User") },
        { path: "/product", component: document.getElementById("Product") }
    ]
    //监听hash的变换
    window.onhashchange = handler;
    function handler() {
        //获取地址栏的hash
        var hash = location.hash.slice(1);
        // slice(参数1，参数2);
        // 参数1：从何处开始选取（截取数组单元起始位置的索引下标）
        // 参数2：从何处结束选取（截取数组单元结束位置的索引下标）
        console.log(location.hash);
        console.log(hash);
        //遍历配置文件，当hash与配置项的path一致时候显示隐藏对应的component
        routes.forEach(item => {
            if (item.path === hash) {
                item.component.style.display = "block";
            } else {
                item.component.style.display = "none";
            }
        })
    }
    //如果有hash值就什么也不做，没有就设置hash值为配置项的第0个的path
    location.hash ? ' ' : location.hash = routes[0].path;
    //执行下处理器
    handler();
    // handLer处理器 component组件 item项 hash哈希
    //Location地址信息 dispLay呈现
    // bLock块none隐藏forEach遍历path地址
    // router -路由Link链接 view使用router - view路由试图