Vue - 前端路由

作者: 泉泉泉泉泉泉 | 来源:发表于2019-07-04 22:01 被阅读0次

关于vue--路由（公众号开发总结）
Vue 学习笔记 vue-router路由和前端状态管理
Vue 基础 - 前端路由
前端路由原理和React Router
vue-router
vue-router 源码实现前端路由的两种方式
简单实现vue-router
2020-09-22
04-15动态路由的实现与优化
Vue路由vue-router

Vue实现一个简单路由

class Router{
    constructor(){
        this.routes = new Map(); //维护一个路由表
        this.currentUrl = '';  //当前路径
        this.bind(); //绑定事件
    }

    bind(){
        //针对浏览器第一次输url的情况
        window.addEventListener('load',this.refresh.bind(this),false);

        //针对浏览器改变url的情况
        window.addEventListener('hashchange',this.refresh.bind(this),false);
    }

    route(path,callback){

        //添加路由，并设置访问该路由的回调函数
        this.routes.set(path,callback);
    }

    replace(path){  //切换路由
        this.currentUrl = path;
        this.routes.get(path)(); //执行添加路由时设置的回调函数
        location.hash = path; //切换路由的时候要修改url
    }

    refresh(){ //刷新，从url中获取当前路由
        this.currentURL = location.hash.slice(1) || '/one';
        if(this.currentURL == '/')  this.currentURL = '/one';
        this.routes.get(this.currentURL)();
    }
}

html部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="route.js"></script>
        <style>
            ul{
                list-style: none;
                display: block;
                overflow: hidden;
            }
            ul li{
                float:left;
                margin-left:10px;
                cursor: pointer
            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li @click="$router.replace('/one')">1</li>
                <li @click="$router.replace('/two')">2</li>
                <li @click="$router.replace('/three')">3</li>
            </ul>
            <div :is="currentComponent">
            </div>
        </div>
        <script>
            
            Vue.component('tab-1', { 
                template: '<div>1 component</div>' 
            })
            Vue.component('tab-2', { 
                template: '<div>2 component</div>' 
            })
            Vue.component('tab-3', { 
                template: '<div>3 component</div>' 
            })
            new Vue({
              el: '#app',
              data(){
                return {
                    test:2,
                    currentComponent:'tab-1',
                    '$route':''
                }
              },
              created(){
                var router = new Router();
                router.route('/one',()=>{
                    this.currentComponent = 'tab-1';
                })
                router.route('/two',()=>{
                    this.currentComponent = 'tab-2';
                })
                router.route('/three',()=>{
                    this.currentComponent = 'tab-3';
                })
                this.$router = router;
              }
            })
        </script>
    </body>
</html>

参考博客：https://www.jianshu.com/p/35be0f4b6ad3