前端路由 hash

weixin_45277714

于 2020-08-20 22:53:38 发布

阅读量107

点赞数

分类专栏：前端文章标签： hash js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45277714/article/details/108137124

版权

前端专栏收录该内容

9 篇文章

订阅专栏

1.hash

以#/开始
http://localhost:2021/#/life

                <a href="#/index" :class='onName=="index"? "active":""'>主页</a>
                <a href="#/school" :class='onName=="school"? " active ":""'>校园</a>
                <a href="#/keji" :class='onName=="keji"? "active":""'>科技</a>
                <a href="#/life" :class='onName=="life"? "active":""'>生活</a>

2.onhashchange事件
当hash值变化时触发

 window.onhashchange = () => {
        console.log(location.hash);
        switch (location.hash.replace('#/', '')) {
            case 'index':
                v.onName = 'index'
                break
            case 'school':
                v.onName = 'school'
                break
            case 'keji':
                v.onName = 'keji'
                break
            case 'life':
                v.onName = 'life'
                break
        }
    }